/* Shared palette colors plus the independently addressable comparison layouts. */
[data-palette="bubblegum"]{--ink:#17121c;--paper:#fff8ee;--yellow:#ff90e8;--blue:#4c1d95;--muted:#443947;--line:#716471;--work:#ffc900;--accent-line:#bba5df;--shadow:#17121c}
[data-palette="night"]{--ink:#f7f3e8;--paper:#181a20;--yellow:#22252e;--blue:#f6df34;--muted:#c9c5ba;--line:#777b89;--work:#1c1f27;--accent-line:#777b89;--shadow:#050609;--detail:#a9b7ff;color-scheme:dark}
[data-palette="afterhours"]{--ink:#fbf0f8;--paper:#1e1726;--yellow:#2b2135;--blue:#ff90e8;--muted:#d0bfcc;--line:#8c769c;--work:#231b2e;--accent-line:#8c769c;--shadow:#08060d;--detail:#bdacff;color-scheme:dark}
[data-palette="original"]{--work:#e9ebf0;--accent-line:#a9b9fb;--shadow:#171d2a}
[data-palette]{--on-accent:var(--paper);--on-ink:var(--paper)}
[data-palette] .skip-link{color:var(--on-ink)}
[data-palette] .nav-contact:hover{background:var(--paper)}
[data-palette] .svg-core-label{fill:var(--on-accent)}
[data-palette] .diagram-result-shadow{fill:var(--shadow)}
[data-palette] .mini-table,[data-palette] .criteria-list i,[data-palette] .chat-caption{color:var(--on-accent)}
[data-palette] .mini-table b{border-color:var(--on-accent)}
[data-palette] .mini-table i{background:var(--on-accent)}
[data-palette] .work{background:var(--work)}
[data-palette] .case-content details{border-color:var(--line)}
[data-palette] .process-list li,[data-palette] .approach-footer{border-color:var(--accent-line)}
[data-palette] .system-figure{box-shadow:7px 7px 0 var(--shadow)}
[data-palette] .mini-file,[data-palette] .mini-table,[data-palette] .checked-result,[data-palette] .chat-reply{box-shadow:4px 4px 0 var(--shadow)}
[data-palette] .site-header .nav-contact{box-shadow:3px 3px 0 var(--shadow)}
.direction-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;padding:9px var(--pad);background:var(--paper);border-bottom:1px solid var(--ink);font-size:12px;font-weight:650}
.direction-bar nav{display:flex;align-items:center;gap:0 22px;flex-wrap:wrap}.direction-bar nav>span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;width:50px;color:var(--muted)}
.direction-bar a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.direction-bar a[aria-current]{text-decoration-thickness:3px}
.direction-bar>a{white-space:nowrap}
/* Editorial composition, with a broad type-led opening. */
[data-layout="editorial"] .hero{background:var(--paper);padding-top:35px}
[data-layout="editorial"] .hero-layout{display:grid;grid-template-columns:1fr 300px;gap:40px;padding-top:14px;padding-bottom:48px;align-items:end}
[data-layout="editorial"] .hero h1{font-size:clamp(58px,6.1vw,91px);max-width:920px;line-height:1.05}
[data-layout="editorial"] .hero h1 .blue-type{display:inline}
[data-layout="editorial"] .hero-description{font-size:20px;max-width:670px}
[data-layout="editorial"] .system-figure{transform:none;background:var(--yellow);margin:0 5px 8px 0;box-shadow:none}
[data-layout="editorial"] .hero-foot{padding:22px 0}
[data-layout="editorial"] .services{background:var(--yellow)}
[data-layout="editorial"] .section-heading{grid-template-columns:.8fr 1.6fr 1fr}
[data-layout="editorial"] .case-study{grid-template-columns:1fr 1.7fr 45px;gap:55px;padding:45px 0}
[data-layout="editorial"] .case-art{height:250px;max-width:400px}
[data-layout="editorial"] .process-list{grid-template-columns:1fr 1fr;gap:40px 65px}
[data-layout="editorial"] .process-list li{display:grid;grid-template-columns:1fr 1.3fr;gap:15px 24px}
[data-layout="editorial"] .process-step{grid-column:1/-1}
[data-layout="editorial"] .process-list h3{margin:0}
[data-layout="editorial"] .contact{background:var(--paper)}
/* Workshop poster with centered type and a compact diagram. */
[data-layout="workshop"] .hero-topline{margin-bottom:28px}
[data-layout="workshop"] .hero-layout{grid-template-columns:1fr;gap:32px;padding-bottom:42px;text-align:center}
[data-layout="workshop"] .hero-copy{max-width:1150px;justify-self:center}
[data-layout="workshop"] .hero h1{font-size:clamp(58px,6.5vw,96px);line-height:1.04}
[data-layout="workshop"] .hero-description{max-width:720px;margin:25px auto 0;font-size:20px}
[data-layout="workshop"] .hero-actions{justify-content:center}
[data-layout="workshop"] .system-figure{width:100%;max-width:300px;justify-self:center;transform:rotate(-2deg);margin:0}
[data-layout="workshop"] .hero-foot{text-align:left}
[data-layout="workshop"] .section-heading{grid-template-columns:1fr 1.6fr 1fr}
[data-layout="workshop"] .service-row{grid-template-columns:45px 1.6fr 1fr 48px;padding:38px 0}
[data-layout="workshop"] .work{display:grid;grid-template-columns:1fr 1fr;gap:30px}
[data-layout="workshop"] .work-heading{grid-column:1/-1}
[data-layout="workshop"] .case-study{display:grid;grid-template-columns:1fr;border:2px solid var(--ink);background:var(--paper);padding:26px;gap:25px;align-content:start}
[data-layout="workshop"] .case-study:first-of-type{grid-column:1/-1;grid-template-columns:1fr 1.4fr}
[data-layout="workshop"] .case-study:first-of-type .case-art{height:260px}
[data-layout="workshop"] .case-art{width:100%;height:220px}
[data-layout="workshop"] .case-number{display:none}
[data-layout="workshop"] .case-study:last-child{padding-bottom:26px}
[data-layout="workshop"] .case-content h3{font-size:35px}
[data-layout="workshop"] .approach-heading{max-width:1000px}
[data-layout="workshop"] .process-list{grid-template-columns:repeat(4,1fr)}
[data-layout="workshop"] .contact{text-align:center}
[data-layout="workshop"] .contact-layout{grid-template-columns:1fr;gap:24px;max-width:800px;margin:25px auto 0}
[data-layout="workshop"] .contact-layout>div>p{margin:auto}
[data-layout="workshop"] .contact-email{max-width:580px;margin:25px auto 0}
[data-layout="workshop"] .copy-row{justify-content:center}
/* Systems desk, with broad horizontal geometry and tighter rows. */
.horizontal-diagram{display:none}
[data-layout="systems"] .hero{background:var(--paper);padding-top:36px}
[data-layout="systems"] .hero-layout{grid-template-columns:1fr;gap:36px}
[data-layout="systems"] .hero-copy{display:grid;grid-template-columns:1.35fr 1fr;gap:20px 70px;align-items:end}
[data-layout="systems"] .hero h1{grid-row:span 2;font-size:clamp(62px,6.4vw,95px)}
[data-layout="systems"] .hero-description{margin:0;align-self:end;font-size:22px}
[data-layout="systems"] .hero-actions{margin:0;align-self:start}
[data-layout="systems"] .system-figure{max-width:none;width:100%;transform:none;box-shadow:none;margin:0;background:var(--yellow)}
[data-layout="systems"] .vertical-diagram{display:none}
[data-layout="systems"] .horizontal-diagram{display:block;width:100%;max-height:200px;padding:8px 24px}
[data-layout="systems"] .system-figure figcaption{padding:12px 24px}
[data-layout="systems"] .diagram-heading{padding:12px 24px}
[data-layout="systems"] .hero-foot{border-color:var(--line)}
[data-layout="systems"] .service-row{grid-template-columns:55px 1.5fr 1fr 48px;gap:35px}
[data-layout="systems"] .service-number{font-size:24px;font-weight:700;color:var(--blue)}
[data-layout="systems"] .case-study{grid-template-columns:250px 1fr 45px;gap:48px}
[data-layout="systems"] .case-art{height:230px}
[data-layout="systems"] .approach{background:var(--yellow);color:var(--ink)}
[data-layout="systems"] .approach-asterisk,[data-layout="systems"] .process-step{color:var(--blue)}
[data-layout="systems"] .approach a:focus-visible{outline-color:var(--blue)}
[data-layout="systems"] .process-list{grid-template-columns:1fr}
[data-layout="systems"] .process-list li{display:grid;grid-template-columns:180px 1fr 1.1fr;align-items:start;gap:35px;padding-top:24px}
[data-layout="systems"] .process-list h3{margin:0}
[data-layout="systems"] .about{grid-template-columns:1.2fr 1fr;gap:60px}
[data-layout="systems"] .contact{background:var(--blue);color:var(--paper)}
[data-layout="systems"] .contact-email{border-color:var(--paper)}
[data-layout="systems"] .contact-email:hover{color:var(--yellow)}
[data-layout="systems"] .contact a:focus-visible,[data-layout="systems"] .contact button:focus-visible{outline-color:var(--paper)}
/* Dark palettes keep large surfaces dark; bright fills belong to small controls/artifacts. */
@media screen{
 :is([data-palette="night"],[data-palette="afterhours"]) .approach{background:var(--work);color:var(--ink)}
 :is([data-palette="night"],[data-palette="afterhours"]) .approach-asterisk,:is([data-palette="night"],[data-palette="afterhours"]) .process-step{color:var(--blue)}
 :is([data-palette="night"],[data-palette="afterhours"]) .approach a:focus-visible{outline-color:var(--blue)}
 :is([data-palette="night"],[data-palette="afterhours"]) .contact{background:var(--yellow);color:var(--ink)}
 :is([data-palette="night"],[data-palette="afterhours"]) .contact-email{border-color:var(--ink)}
 :is([data-palette="night"],[data-palette="afterhours"]) .contact-email:hover{color:var(--blue)}
 :is([data-palette="night"],[data-palette="afterhours"]) .contact a:focus-visible,:is([data-palette="night"],[data-palette="afterhours"]) .contact button:focus-visible{outline-color:var(--blue)}
 :is([data-palette="night"],[data-palette="afterhours"]) .nav-contact,:is([data-palette="night"],[data-palette="afterhours"]) .button-dark{background:var(--blue);color:var(--paper);border-color:var(--blue)}
 :is([data-palette="night"],[data-palette="afterhours"]) .nav-contact:hover,:is([data-palette="night"],[data-palette="afterhours"]) .button-dark:hover{background:var(--ink);border-color:var(--ink)}
 :is([data-palette="night"],[data-palette="afterhours"]) .diagram-input{stroke:var(--detail)}
 :is([data-palette="night"],[data-palette="afterhours"]) .project-glyph{color:var(--detail)}
}
/* Independent comparison page. */
.directions-page{padding:55px var(--pad) 70px;max-width:1600px;margin:auto}
.directions-intro{display:grid;grid-template-columns:1.5fr 1fr;gap:55px;align-items:end;margin-bottom:46px}
.directions-intro h1{font-size:clamp(43px,5vw,74px);margin-top:20px;max-width:800px}
.directions-intro p:last-child{font-size:17px;line-height:1.7;max-width:540px}
.direction-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.direction-card{border-top:2px solid var(--ink);padding-top:18px;min-width:0}
.direction-number{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px}
.palette-poster{height:325px;display:flex;flex-direction:column;justify-content:space-between;padding:24px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);text-decoration:none;position:relative;overflow:hidden}
.palette-poster .poster-brand{font-size:25px;font-weight:900;letter-spacing:-.08em}
.palette-poster strong{font-family:Archivo,Arial,sans-serif;font-size:29px;letter-spacing:-.06em;line-height:1.05;font-weight:400}
.palette-poster strong span{color:var(--blue)}
.palette-poster small{font-size:10px;letter-spacing:.04em;text-transform:uppercase}
.swatches{display:flex;margin:20px 0 22px;height:22px;border:1px solid var(--ink)}
.swatches i{flex:1;background:var(--paper)}
.swatches i:nth-child(2){background:var(--yellow)}
.swatches i:nth-child(3){background:var(--blue)}
.swatches i:nth-child(4){background:var(--ink)}
.swatches i:nth-child(5){background:var(--work)}
.palette-reference{font-size:12px;line-height:1.6;margin-top:14px;min-height:44px}.palette-baseline{display:flex;align-items:center}.palette-reference a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.direction-card h2{font-size:26px;margin-bottom:13px}
.direction-card>p:not(.direction-number){font-size:14px;line-height:1.65;min-height:95px}
.direction-card>.button{margin-top:20px;width:100%;font-size:12px;gap:12px}
.directions-note{margin-top:45px;border-top:1px solid var(--line);padding-top:25px;font-size:14px;max-width:none}
@media(max-width:1050px){
 [data-layout="editorial"] .hero-layout{grid-template-columns:1fr 240px;gap:28px}
 [data-layout="editorial"] .hero h1{font-size:58px}
 [data-layout="editorial"] .section-heading,[data-layout="workshop"] .section-heading{grid-template-columns:1fr 2fr}
 [data-layout="editorial"] .case-study{gap:32px;grid-template-columns:210px 1fr 25px}
 [data-layout="editorial"] .process-list li{display:block}
 [data-layout="editorial"] .process-list h3{margin:18px 0}
 [data-layout="workshop"] .case-content h3{font-size:29px}
 [data-layout="systems"] .hero-copy{gap:25px 35px}
 [data-layout="systems"] .hero h1{font-size:62px}
 [data-layout="systems"] .hero-description{font-size:18px}
 [data-layout="systems"] .case-study{grid-template-columns:170px 1fr 25px;gap:28px}
 [data-layout="systems"] .process-list li{grid-template-columns:120px 1fr 1fr;gap:25px}
 .direction-grid{grid-template-columns:1fr 1fr;gap:35px}.palette-poster{padding:18px;height:280px}.palette-poster strong{font-size:27px}
 .direction-card h2{font-size:25px}.direction-card>p:not(.direction-number){min-height:90px}
}
@media(max-width:760px){
 .direction-bar{flex-direction:column;align-items:start;gap:0;padding-top:4px;padding-bottom:6px;font-size:11px}.direction-bar nav{gap:0 17px}
 [data-layout="editorial"] .hero-layout{grid-template-columns:1fr;gap:35px}
 [data-layout="editorial"] .hero h1{font-size:clamp(46px,9vw,66px)}
 [data-layout="editorial"] .hero-description,[data-layout="workshop"] .hero-description{font-size:17px}
 [data-layout="editorial"] .system-figure{max-width:340px;width:calc(100% - 12px)}
 [data-layout="editorial"] .section-heading,[data-layout="workshop"] .section-heading{grid-template-columns:1fr}
 [data-layout="editorial"] .case-study{grid-template-columns:1fr;gap:25px}
 [data-layout="editorial"] .case-art{max-width:none;height:185px}
 [data-layout="editorial"] .process-list{gap:30px}
 [data-layout="workshop"] .hero h1{font-size:clamp(44px,9vw,65px)}
 [data-layout="workshop"] .system-figure{width:calc(100% - 16px)}
 [data-layout="workshop"] .service-row{grid-template-columns:24px 1fr 44px;gap:12px}
 [data-layout="workshop"] .work{grid-template-columns:1fr;gap:24px}
 [data-layout="workshop"] .case-study:first-of-type{grid-row:auto;grid-template-columns:1fr}
 [data-layout="workshop"] .case-study:first-of-type .case-art{height:190px}
 [data-layout="workshop"] .case-study{padding:20px}
 [data-layout="workshop"] .process-list{grid-template-columns:1fr 1fr}
 [data-layout="systems"] .hero-copy{display:block}
 [data-layout="systems"] .hero h1{font-size:clamp(44px,11.3vw,72px)}
 [data-layout="systems"] .hero-description{margin-top:25px}
 [data-layout="systems"] .hero-actions{margin-top:25px}
 [data-layout="systems"] .horizontal-diagram{display:none}
 [data-layout="systems"] .vertical-diagram{display:block}
 [data-layout="systems"] .system-figure{max-width:400px}
 [data-layout="systems"] .service-row{grid-template-columns:27px 1fr 44px;gap:12px}
 [data-layout="systems"] .service-number{font-size:15px}
 [data-layout="systems"] .case-study{grid-template-columns:1fr;gap:24px}
 [data-layout="systems"] .case-art{height:180px}
 [data-layout="systems"] .process-list li{grid-template-columns:1fr;gap:14px}
 [data-layout="systems"] .process-list h3 br{display:none}
 [data-layout="systems"] .about{grid-template-columns:1fr;gap:30px}
 .directions-intro{grid-template-columns:1fr;gap:25px}.direction-grid{grid-template-columns:1fr;gap:40px}
 .palette-poster{height:310px}.palette-poster strong{font-size:44px}.direction-card h2{font-size:31px}
 .direction-card>p:not(.direction-number){min-height:0}.direction-card>.button{width:auto}
}
@media(max-width:380px){
 .direction-bar nav{gap:0 13px;font-size:10px}
 [data-layout="editorial"] .process-list{grid-template-columns:1fr}
 [data-layout="workshop"] .case-study{padding:16px}
 [data-layout="workshop"] .case-content h3{font-size:27px}
 [data-layout="workshop"] .criteria-list{width:110px;margin-right:12px}
 [data-layout="workshop"] .criteria-list span{font-size:9px}
 [data-layout="workshop"] .checked-result{max-width:85px;font-size:9px}
 .palette-poster strong{font-size:35px}
}
@media(prefers-reduced-motion:reduce){[data-palette] .system-figure{transform:none}}
@media print{
 [data-palette]{--ink:#111;--paper:#fff;--muted:#333;--line:#555;--blue:#111;--yellow:#fff;--work:#fff;--accent-line:#555;--shadow:#fff;color-scheme:light}
 .direction-bar{display:none!important}
}

.axis-section+.axis-section{margin-top:80px}.axis-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px;padding-bottom:24px;border-bottom:2px solid var(--ink)}.axis-heading h2{font-size:38px}.axis-heading p{max-width:460px;font-size:14px}.layout-sketch{height:245px;background:var(--paper);border:2px solid var(--ink);display:grid;gap:9px;padding:18px;text-decoration:none}.layout-sketch span{background:var(--yellow);border:1px solid var(--ink);padding:10px;font-size:12px;font-weight:700}.layout-sketch .sketch-work{background:var(--blue);color:var(--paper)}.sketch-poster{grid-template-columns:1.4fr 1fr}.sketch-poster .sketch-work{grid-column:1/-1}.sketch-editorial{grid-template-columns:1fr 1fr}.sketch-editorial .sketch-title{grid-column:1/-1;min-height:94px}.sketch-workshop{grid-template-columns:1fr 1fr;text-align:center}.sketch-workshop .sketch-title{grid-column:1/-1}.sketch-systems{grid-template-columns:1.4fr 1fr}.sketch-systems .sketch-flow,.sketch-systems .sketch-work{grid-column:1/-1}.sketch-systems .sketch-flow{text-align:center}.layout-grid .direction-card h2{margin-top:24px}
@media(max-width:760px){.axis-heading{display:block}.axis-heading p{margin-top:18px}.axis-heading h2{font-size:33px}.direction-grid{grid-template-columns:1fr}.direction-bar>div{width:100%}.direction-bar nav{column-gap:13px}.direction-bar nav>span{width:100%;min-height:20px}.direction-bar>a:last-child{position:absolute;right:var(--pad);margin-top:0}.palette-poster{height:285px}}