/* Reading rhythm: one focal point at a time, on the established charcoal surface. */
:root{--reading-text:#bfc3c5;--reading-label:#a1a8ad;--reading-title:#e2e3de;--reading-rule:#ffffff1a}
body{color:var(--reading-title)}
h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
#motion-mode{border:1px solid #ffffff30;background:none;color:#bec6cf;padding:10px 13px;font-size:12px;white-space:nowrap}
#motion-mode[aria-pressed=true]{background:#d8ddd9;color:#111519;border-color:#d8ddd9}
#motion-mode:focus-visible{outline:2px solid #d8ddd9;outline-offset:5px}
header nav{gap:24px}
.ticker{height:46px;color:#9fa8b3;border-color:var(--reading-rule)}
.ticker>div{font-size:16px;letter-spacing:1.5px;animation-duration:90s;animation-play-state:paused}
.ticker.ticker-visible>div{animation-play-state:running}
.ticker span{font-size:21px;padding:0 36px}
.ticker:hover>div,body:has(:is(input,textarea,select):focus) .ticker>div{animation-play-state:paused}
:is(.projects,.studio-content)>.exhibition-field:after{display:none}
.ambient-dust{opacity:.65}
.reveal-section{transform:none;transition:opacity .45s}

/* Short introduction, then the work. */
#projects{padding-top:84px;padding-bottom:88px}
#projects .section-head{align-items:flex-end;gap:24px}
#projects .section-head h2{font-size:clamp(34px,4.2vw,60px);line-height:1.3;letter-spacing:-.025em;color:var(--reading-title)}
#projects .eyebrow{font-size:11px;letter-spacing:2px;margin-bottom:16px;color:var(--reading-label)}
#projects .project-count{padding:0;border:0;background:none;color:var(--reading-label);font-size:11px}
#projects .work-intro{display:block;margin:22px 0 36px}
#projects .work-intro-note{font-size:15px;line-height:1.85;max-width:660px;color:var(--reading-text)}
#projects .filterbar{padding-bottom:15px}
#projects .filters button,#projects .saved-filter,#project-search{font-size:14px}
#projects .project-search-row .filter-note{font-size:12px;letter-spacing:0}
.portfolio-status{min-height:0;margin:0;font-size:12px}
.portfolio-status:not(:empty){margin:12px 0 0}
#projects .project-grid{margin-top:32px;gap:64px 40px}
#projects .portfolio-card .case-topline{font-size:10px;letter-spacing:.7px;color:var(--reading-label)}
#projects .portfolio-card .case-topline>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#projects .portfolio-card .case-topline>span:last-child{font-size:11px;color:var(--reading-label)}
.case-department{font-size:12px;letter-spacing:.6px;color:var(--reading-label)}
#projects .portfolio-card-copy h3{font-size:clamp(25px,2.25vw,32px);line-height:1.45;margin:10px 0 12px;color:var(--reading-title)}
.portfolio-card-copy>p{font-size:15px;line-height:1.9;color:var(--reading-text)}
#projects .portfolio-card .case-tags>span{font-size:12px;color:var(--reading-label)}
.portfolio-card-foot,.save-case,.quick-3d{font-size:12px;color:#b9c1bb}
.portfolio-badge{font-size:10px;letter-spacing:.5px}
#projects .portfolio-featured .portfolio-card-copy h3{font-size:clamp(28px,2.7vw,38px)}
.featured-note,.featured-quote{display:none}
#projects .portfolio-card .card-media:after{display:none}
#projects .portfolio-card .case-open:hover .card-media>img,#projects .portfolio-card .case-open:focus-visible .card-media>img,.case-open:hover .portfolio-art{transform:none}
.portfolio-card-copy h3>span{transition:transform .2s}
#projects .work-end{margin-top:60px;padding-top:26px;font-size:15px;color:var(--reading-text)}
#projects .work-end>a{font-size:14px}

/* Secondary sections use smaller headings and more generous body type. */
.studio-content{padding-top:80px;padding-bottom:80px;border-top-color:var(--reading-rule)}
.studio-content .content-heading{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px 60px;margin-bottom:38px}
.studio-content .content-heading>span{border:0;padding:0;font-size:11px;letter-spacing:2px;color:var(--reading-label)}
.studio-content .content-heading h2,.process-section .content-heading h2{font-size:clamp(32px,3.35vw,48px);line-height:1.4;letter-spacing:-.025em;color:var(--reading-title)}
.studio-content .content-heading>p{font-size:16px;line-height:1.9;color:var(--reading-text);max-width:380px}
.service-number{display:none}
.service-panel,.service-panel+.service-panel{padding-top:32px;padding-bottom:32px}
.service-panel h3{font-size:29px;margin:18px 0}
.service-panel:hover,.service-panel{background:none}
.service-panel:hover .service-image img{transform:none}
.service-panel>p,.service-panel details p,.studio-faq details p{font-size:16px;line-height:1.9;color:var(--reading-text)}
.content-kicker{font-size:11px;letter-spacing:1.2px;color:var(--reading-label)}
.service-panel summary{padding:17px 0;font-size:16px}
.service-panel details[open]:before{box-shadow:none}
.service-image figcaption{font-size:11px}
.engineering-panel{gap:60px;padding-block:34px}
.engineering-panel h3{font-size:29px}
.engineering-panel p,.engineering-panel li span{font-size:15px;line-height:1.9;color:var(--reading-text)}

.process-stage{padding:30px 32px 65px;gap:34px;margin-bottom:24px;background:none;border-color:var(--reading-rule)}
.diagram-node{width:72px;height:72px;font-size:14px;box-shadow:none!important}
.process-caption strong{font-size:clamp(22px,2.2vw,30px);line-height:1.5;margin-top:12px;min-height:1.5em;color:var(--reading-title)}
.process-caption>span{font-size:12px;color:var(--reading-label);letter-spacing:1px}
.process-meter>span{height:1px;box-shadow:none;transition:width .8s}
.process-list li{padding:20px 24px;border-color:var(--reading-rule)}
.process-select{font-size:34px;letter-spacing:0;color:#899197;-webkit-text-stroke:0;padding-bottom:0}
.process-select[aria-pressed=true]{color:#e2e3de;transform:none}
.process-list h3{font-size:19px;margin:16px 0 10px}
.process-list p{font-size:15px;line-height:1.85;color:var(--reading-text);margin-bottom:0}
.process-list li:has(.process-select[aria-pressed=true]){background:none;border-bottom-color:#8a969d}
.process-autoplay{font-size:12px;color:#b6bec7}

/* Preparation and the editor are optional, without removing their useful content. */
.inquiry-preparation{border-block:1px solid var(--reading-rule)}
.inquiry-preparation>summary,.pb-disclosure>summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:25px 0;list-style:none;cursor:pointer;font-size:19px;color:var(--reading-title)}
.inquiry-preparation>summary::-webkit-details-marker,.pb-disclosure>summary::-webkit-details-marker{display:none}
.inquiry-preparation>summary small{font-size:13px;display:block;color:var(--reading-label);line-height:1.8;margin-top:7px}
.disclosure-mark{font-size:25px;line-height:1;transition:transform .2s}
.inquiry-preparation[open] .disclosure-mark{transform:rotate(45deg)}
.inquiry-preparation>summary:focus-visible,.pb-disclosure>summary:focus-visible{outline:2px solid #c5cfcc;outline-offset:5px}
.inquiry-preparation .inquiry-grid{padding:12px 0 30px;gap:40px}
.brief-visual{display:none}
.brief-note{padding:25px;border-color:var(--reading-rule)}
.brief-note h3{font-size:24px}
.brief-note label>span>span{font-size:14px;color:var(--reading-text)}
.studio-faq summary{font-size:16px;padding:22px 0}
.studio-faq details p{font-size:15px}
.project-brief-builder{border:0;margin-top:32px;padding-top:0}
.pb-heading{display:block;margin-bottom:24px}
.pb-eyebrow{display:none}
.pb-heading h3{font-size:26px;line-height:1.5;margin:0}
.pb-heading>p{font-size:15px;color:var(--reading-text);margin-top:12px}
.pb-heading>p>span{font-size:12px;color:var(--reading-label)}
.pb-disclosure>summary{background:#d8d9d0;color:#242826;padding:23px 26px;border:1px solid #d8d9d0}
.pb-disclosure>summary small{font-size:12px;line-height:1.7;color:#535b56;display:block;margin-top:8px}
.pb-disclosure>summary::after{content:'↗';font:28px/1 Arial;flex-shrink:0}
.pb-disclosure[open]>summary::after{content:'−'}
.pb-disclosure[open]>summary{background:transparent;color:var(--reading-title);border-color:var(--reading-rule)}
.pb-disclosure[open]>summary small{color:var(--reading-label)}
.pb-workspace{border-top:0}
.pb-field>span:first-child{font-size:14px}
.project-brief-builder .pb-field :is(input,select,textarea){font-size:16px}
.pb-preview{background:#dcdcd3}
.pb-summary{font-size:15px;line-height:1.85}
.pb-save-state,.pb-feedback{font-size:12px}

.case-hero-copy h2{font-size:clamp(26px,2.5vw,34px);line-height:1.5;text-wrap:balance}
.case-summary,.case-question>p,.case-chapters p,.concept-note p{font-size:15px;line-height:1.9;color:var(--reading-text)}
.case-facts dt{font-size:12px;color:var(--reading-label)}
.case-facts dd{font-size:14px}
.case-subnav button,.case-primary,.gallery-bar>p,.case-source{font-size:13px}
.case-source{color:var(--reading-label)}
.case-chapters article>span{font-size:28px;color:var(--reading-label);-webkit-text-stroke:0;margin-bottom:20px}
.case-next-step:after{display:none}
.case-color-strip>button>span{font-size:14px}
.case-color-strip small,.color-feedback,.case-deliverables{font-size:12px}
.about-heading h2{color:var(--reading-title);text-wrap:balance}
.studio-pair p,.about p{color:var(--reading-text)}

/* Keep the particle controls out of the headline at intermediate widths. */
@media(min-width:701px) and (max-width:1100px){
 header .logo span{display:none}header nav{gap:18px}
 .hero.stage .stage-meta{display:none}
 .particle-controls{top:59%;gap:3px}
 .orbit-label{top:55%}
 .particle-caption{display:none}
 .hero.stage .stage-title{top:auto;bottom:14%;max-width:60%}
 .stage-title h1{font-size:30px}
 .stage-copy p{font-size:13px;max-width:320px}
 .hero.stage .stage-enter{bottom:14%;width:110px;height:110px}
 .process-stage{grid-template-columns:1fr}
 .process-diagram{justify-content:flex-start}
}
@media(max-width:700px){
 header nav{gap:12px}header .logo>img{width:75px}#replay-intro{font-size:0;padding:9px 10px}#replay-intro span{font-size:16px;padding:0}#motion-mode{font-size:11px;padding:9px 10px}
 .ticker{height:40px}.ticker>div{font-size:13px}.ticker span{font-size:17px;padding:0 24px}
 #projects{padding:58px 5vw 64px}#projects .section-head h2{font-size:32px;max-width:13em}#projects .project-count{display:none}
 #projects .work-intro{margin:18px 0 26px}#projects .work-intro-note{font-size:14px}
 #projects .filterbar{gap:15px}#projects .filters button{font-size:12px;padding:10px 8px}#projects .saved-filter{font-size:12px}
 #project-search{font-size:16px}#projects .project-grid{gap:42px;margin-top:25px}
 #projects .portfolio-card .case-topline{font-size:9px}#projects .portfolio-card .case-topline>span:first-child{max-width:70%}
 #projects .portfolio-card-copy h3,#projects .portfolio-featured .portfolio-card-copy h3{font-size:27px}
 #projects .portfolio-card-copy>p{font-size:15px}
 #projects .work-end{margin-top:40px}
 .studio-content{padding-block:58px}
 .studio-content .content-heading{display:block;margin-bottom:28px}
 .studio-content .content-heading h2,.process-section .content-heading h2{font-size:31px;margin:18px 0;line-height:1.45}
 .studio-content .content-heading>p{font-size:15px}
 .service-panel h3,.engineering-panel h3{font-size:26px}
 .service-panel,.service-panel+.service-panel{padding-block:28px}
 .process-stage{padding:25px 18px 62px;gap:25px}
 .process-diagram{justify-content:space-between;gap:5px}.diagram-node{width:50px;height:50px;font-size:12px}
 .process-select{font-size:29px}.process-list li{padding:18px 14px}.process-list h3{font-size:18px}.process-list p{font-size:14px}
 .inquiry-preparation>summary,.pb-disclosure>summary{font-size:17px}.inquiry-preparation .inquiry-grid{gap:24px}
 .pb-heading h3{font-size:24px}.pb-disclosure>summary{padding:22px 18px}
 .pb-fields{grid-template-columns:1fr}.pb-field.pb-wide{grid-column:auto}.pb-summary{font-size:14px}
 .case-hero-copy h2{font-size:27px}.case-summary,.case-question>p,.case-chapters p,.concept-note p{font-size:15px}
 .case-subnav{gap:10px 18px}.case-subnav button{font-size:12px}.case-source{font-size:12px;line-height:1.85}
}
html[data-motion=quiet]{scroll-behavior:auto}
html[data-motion=quiet] :is(.ticker>div,.scroll-cue>span),html.reading-dialog .ticker>div{animation-play-state:paused!important}
html[data-motion=quiet] :is(.reveal-section,.portfolio-card,.world-logo,.stage-title,.service-image img,.process-select){animation:none!important;transition:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.ticker>div{animation:none!important}.disclosure-mark{transition:none}}