/* v12: case-study layout ("the card becomes the hero"). Shared by /work/<slug>/ (light DOM, after v1-v5) and the
   homepage overlay (adopted into a shadow root by cs-transition-v1.js). Everything is scoped to .csx-root. */
@font-face{font-family:Burn;src:url(/sequence-assets/TRTBurn-VF.ttf) format("truetype");font-display:swap}
@font-face{font-family:Mono;src:url(/fonts/dm-mono-latin.woff2) format("woff2");font-display:swap}
.csx-page{background:#fbf8f0}
.csx-root{--cream:#fbf8f0;--paper:#fffdf7;--ink:#17211d;--blue:#04b9d8;--blue-text:#007a91;--pink:#f04e97;--rule:#d9d4c4;
 --display:Burn,Impact,sans-serif;--mono:Mono,"IBM Plex Mono",ui-monospace,monospace;--text:"Cut Inclusive","Inclusive Sans",system-ui,sans-serif;
 --hh:min(62.334vw,100svh);--gut:clamp(20px,3.2vw,56px);
 position:relative;background:var(--cream);color:var(--ink);font:400 19px/1.6 var(--text);-webkit-font-smoothing:antialiased}
.csx-root main{max-width:none;margin:0;padding:0}
.csx-root a{color:inherit}
.csx-root img{max-width:100%}
/* top bar: two opaque pills over the hero; sticky in both the page and the overlay */
.csx-bar{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;height:72px;margin-bottom:-72px;padding:0 var(--gut);pointer-events:none}
.csx-bar>*{pointer-events:auto}
.csx-brandbox{display:flex;align-items:center;gap:4px;background:var(--paper);border:1px solid var(--ink);padding:4px 6px 4px 4px;box-shadow:3px 3px 0 rgba(23,33,29,.12)}
.csx-brand{display:flex;align-items:center;text-decoration:none}
.csx-brand img{display:block;width:34px;height:34px}
.csx-nav{display:flex;gap:2px;font:12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.csx-nav a{padding:10px 10px;text-decoration:none}
.csx-nav a:hover{color:var(--blue-text)}
.csx-close{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 18px;background:var(--ink);color:var(--cream)!important;border:1px solid var(--ink);font:13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 rgba(4,185,216,.9)}
.csx-close b{font:400 22px/1 var(--text);letter-spacing:0;margin-top:-2px}
.csx-bar a{-webkit-tap-highlight-color:transparent}
.csx-close:hover,.csx-close:active{background:#000;color:var(--cream)!important}
.csx-root a:focus-visible,.csx-close:focus-visible,.csx-root [tabindex]:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
/* hero = the card, full-bleed */
.csx-hero{position:relative;height:var(--hh);min-height:520px;overflow:hidden;background:var(--cream);margin:0}
.csx-hero__art{position:absolute;inset:0}
.csx-hero__art picture{display:contents}
.csx-hero__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:right center;display:block}
.csx--gibbles .csx-hero__img{top:-5.1%;height:110.6%}
.csx-hero__copy{position:absolute;left:var(--gut);top:0;bottom:0;width:min(50%,760px);padding-top:max(calc(var(--hh)*.051),84px)}
.csx-eyebrow{display:block;margin:0;font:400 clamp(14px,1.1vw,18px)/1.5 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.csx-hero .csx-eyebrow{position:absolute;top:max(calc(var(--hh)*.051),84px);left:0;white-space:nowrap}
.csx-root .csx-title{margin:0;padding:0;border:0;max-width:100%;font:400 clamp(64px,9.2vw,152px)/.84 var(--display);letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.csx-hero__flow{position:absolute;left:0;right:0;top:calc(var(--hh)*.29)}
.csx-sub{margin:18px 0 0;font:italic 600 clamp(18px,1.6vw,24px)/1.3 var(--text);color:var(--pink);max-width:30ch}
.csx-premise{margin:clamp(18px,2vw,30px) 0 0 -14px;padding:clamp(22px,2.2vw,34px) clamp(26px,2.8vw,44px) clamp(24px,2.4vw,38px) clamp(20px,2vw,32px);max-width:min(34em,100%);font:500 clamp(17px,1.35vw,21px)/1.5 var(--text);color:var(--ink);background:url(/portfolio-assets/assets/work/cards/paper.webp) center/100% 100% no-repeat}
/* sheet: the readable part */
.csx-sheet{max-width:1120px;margin:0 auto;padding:clamp(28px,4vw,56px) var(--gut) 24px}
.csx-root .crumbs{margin:0 0 28px;font:12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#5b625e}
.csx-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 clamp(40px,5vw,64px);padding:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.csx-meta>div{padding:16px 20px 18px 0;margin-right:20px}
.csx-meta>div+div{border-left:1px solid var(--rule);padding-left:20px;margin-right:0}
.csx-meta dt{margin:0 0 6px;font:11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-text)}
.csx-meta dd{margin:0;font:500 16px/1.4 var(--text)}
.csx-tldr{position:relative;display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:8px 40px;margin:0 0 clamp(48px,6vw,80px);padding:clamp(24px,3vw,40px);background:var(--paper);border:1.5px solid var(--ink);box-shadow:8px 8px 0 var(--blue)}
.csx-root .csx-tldr h2{margin:0;padding:0;border:0;font:400 clamp(44px,5vw,72px)/.9 var(--display);letter-spacing:.03em}
.csx-tldr ul{list-style:none;margin:0;padding:0;counter-reset:t}
.csx-tldr li{counter-increment:t;position:relative;margin:0;padding:12px 0 12px 52px;border-top:1px solid var(--rule);font:500 clamp(17px,1.4vw,20px)/1.5 var(--text);max-width:68ch}
.csx-tldr li:first-child{border-top:0;padding-top:4px}
.csx-tldr li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:15px;font:12px/1 var(--mono);letter-spacing:.1em;color:var(--blue-text)}
.csx-tldr li:first-child::before{top:7px}
.csx-resume{grid-column:2;margin:8px 0 0;font-size:15px;line-height:1.5;color:#4a504c;max-width:68ch}
.csx-intro{margin:0 0 8px}
.csx-intro>p{max-width:68ch}
.csx-root .tags{gap:8px;margin:0 0 28px}
.csx-root .tags li{padding:8px 14px 7px;border:1.5px solid var(--ink);border-radius:999px;font:400 14px/1 var(--display);letter-spacing:.08em;background:transparent}
.csx-root .hero-art{max-width:880px;border:1px solid var(--rule);margin:0 0 8px}
.csx-root .cs-jump{margin:32px 0 0;padding:14px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);font:12px/1.3 var(--mono);letter-spacing:.12em}
.csx-root .cs-jump a{text-decoration:none}
.csx-root h2{font:400 clamp(40px,5vw,68px)/.92 var(--display);letter-spacing:.03em;margin:clamp(56px,7vw,96px) 0 24px;padding-top:24px;border-top:2px solid var(--ink)}
.csx-root .cs h3{font:400 clamp(26px,2.6vw,36px)/1 var(--display);letter-spacing:.04em;margin:52px 0 16px}
.csx-root .cs p,.csx-root .cs li{max-width:68ch}
.csx-root .cs-pr{background:var(--paper);border:1.5px solid var(--ink);border-left:6px solid var(--blue);box-shadow:5px 5px 0 rgba(23,33,29,.08)}
.csx-root .cs-pr strong{font-family:var(--mono);font-size:12px;letter-spacing:.12em}
.csx-root .cs-quote{border-left-color:var(--pink)}
.csx-root .cs-fig img{border-color:var(--rule)}
.csx-root .cs-fig figcaption{font-size:15px}
.csx-ask{margin-top:8px}
.csx-root .cta{font:400 16px/1 var(--display);letter-spacing:.08em;border:1.5px solid var(--ink)}
.csx-root .cta--primary{background:var(--ink);color:var(--cream)}
/* next project: a card, same anatomy as the homepage card; opens with the same transition */
.csx-next{max-width:1120px;margin:0 auto;padding:clamp(40px,6vw,88px) var(--gut) 24px;border-top:2px solid var(--ink)}
.csx-label{margin:0 0 18px;font:12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-text)}
.csx-next__card{position:relative;display:block;width:min(100%,754px);aspect-ratio:754/470;overflow:hidden;background:var(--cream);text-decoration:none;border:1px solid rgba(23,33,29,.25);box-shadow:0 18px 40px -22px rgba(23,33,29,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.csx-next__card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(23,33,29,.5)}
.csx-next__art,.csx-next__art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:right center;display:block}
.csx-next__copy{position:absolute;left:3.2%;top:5.1%;bottom:6%;width:58%;display:flex;flex-direction:column}
.csx-next__title{margin-top:auto;font:400 clamp(34px,6.4vw,64px)/.86 var(--display);letter-spacing:.03em;text-transform:uppercase}
.csx-next__sum{margin-top:14px;font:500 clamp(14px,1.3vw,16px)/1.5 var(--text);max-width:30em}
.csx-next__go{margin-top:16px;font:12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-text)}
.csx-prevnext{max-width:1120px;margin:0 auto;padding:8px var(--gut) 40px;font-size:15px;color:#4a504c}
.csx-root .aeo-footer{max-width:1120px;padding-left:var(--gut);padding-right:var(--gut)}
@media (max-width:767px){
 .csx-root{font-size:17px;--gut:18px}
 .csx-bar{height:64px;margin-bottom:-64px}
 .csx-nav{display:none}
 .csx-close{height:40px;padding:0 12px 0 14px}
 .csx-hero{height:auto;min-height:0;overflow:visible}
 .csx-hero__art{position:relative;inset:auto;height:78vw;overflow:hidden}
 .csx-hero__art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to bottom,rgba(251,248,240,0),var(--cream) 92%)}
 .csx-hero__img{object-position:center top}
 .csx-hero__img--hi{display:none}
 .csx--gibbles .csx-hero__img{top:0;height:100%}
 .csx-hero__copy{position:static;width:auto;padding:0 var(--gut) 8px}
 .csx-hero .csx-eyebrow{top:64px;left:0;z-index:1;padding:10px 14px 9px var(--gut);background:var(--cream);font-size:13px}
 .csx-root .csx-title{font-size:clamp(40px,11.6vw,56px);line-height:.9}
 .csx-hero__flow{position:relative;z-index:1;top:auto;margin-top:-72px}
 .csx-premise{margin:14px 0 0 -10px;font-size:16px}
 .csx-meta{grid-template-columns:1fr 1fr}
 .csx-meta>div,.csx-meta>div+div{margin:0;padding:12px 12px 12px 0;border-left:0}
 .csx-meta>div:nth-child(even){padding-left:12px;border-left:1px solid var(--rule)}
 .csx-meta>div:nth-child(n+3){border-top:1px solid var(--rule)}
 .csx-tldr{grid-template-columns:1fr;box-shadow:5px 5px 0 var(--blue);padding:22px 18px}
 .csx-tldr li{padding-left:40px}
 .csx-resume{grid-column:1}
 .csx-next__card{aspect-ratio:358/340}
 .csx-next__art img{object-position:center top}
 .csx-next__art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to bottom,rgba(251,248,240,0),var(--cream) 70%)}
 .csx-next__copy{left:16px;right:16px;width:auto;top:auto;bottom:18px;height:auto}
 .csx-next__copy .csx-eyebrow{display:none}
 .csx-next__sum{display:none}
}
@media (prefers-reduced-motion:reduce){.csx-next__card{transition:none}}