html:root{background-image:url("../images/eb4bf411-0068-4aa3-bc20-8b1307b78b81_rwc_233x183x1827x1408x4096.png");background-image:image-set(url("../optimized/eb4bf411-0068-4aa3-bc20-8b1307b78b81_rwc_233x183x1827x1408x4096.webp") type("image/webp"),url("../images/eb4bf411-0068-4aa3-bc20-8b1307b78b81_rwc_233x183x1827x1408x4096.png") type("image/png"))}
body:has(#outcomes:target) main::after{content:"";display:block;height:calc(100vh - 120px)}
.design-system-case{--case-ink:#eaeaea;--case-muted:#c5d0d4;--case-acid:#3eff92;--case-panel:rgba(15,37,50,.72);--case-line:rgba(150,193,194,.38);color:var(--case-ink)}
.design-system-case .case-main{width:min(1160px,100%);margin:auto;padding:clamp(54px,8vw,108px) clamp(20px,5vw,70px) 0}
.design-system-case article{display:grid;gap:clamp(42px,6vw,78px)}
.design-system-case .case-hero{max-width:780px;padding-top:clamp(8px,2vw,24px)}
.design-system-case .case-kicker,.design-system-case .section-index{margin:0;color:var(--case-acid);font:700 13px/1.35 qqmf,monospace;letter-spacing:.11em;text-transform:uppercase}
.design-system-case h1,.design-system-case h2,.design-system-case h3{color:var(--case-acid);font-family:qqmf,monospace}
.design-system-case h1{max-width:850px;margin:16px 0 0;font-size:clamp(46px,8vw,88px);line-height:.94;letter-spacing:-.055em}
.design-system-case .case-dek{max-width:68ch;margin:28px 0 0;color:var(--case-ink);font:400 clamp(21px,2.7vw,31px)/1.3 qqmf,monospace}
.design-system-case .case-section{width:min(760px,100%);scroll-margin-top:92px}
.design-system-case h2{margin:11px 0 20px;font-size:clamp(28px,4vw,42px);line-height:1.05;letter-spacing:-.035em}
.design-system-case .case-copy p{max-width:70ch;margin:0 0 17px;color:var(--case-ink);font:400 clamp(18px,2vw,21px)/1.55 hrpf,system-ui,sans-serif}
.design-system-case .case-copy h2:not(:first-of-type){margin-top:46px}
.design-system-case .brief-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;border:1px solid var(--case-line);background:var(--case-line)}
.design-system-case .brief-grid div{min-height:100px;padding:18px 20px;background:rgba(22,45,58,.9)}
.design-system-case dt{color:var(--case-acid);font:700 12px/1.2 qqmf,monospace;letter-spacing:.08em;text-transform:uppercase}.design-system-case dd{margin:10px 0 0;color:var(--case-ink);font:18px/1.35 hrpf,system-ui}
.design-system-case .artifact{width:100%;margin:0}.design-system-case .artifact picture{display:block}.design-system-case .artifact img{display:block;width:100%;height:auto;border:1px solid var(--case-line);background:#162e3c}.design-system-case figcaption{margin:9px 0 0;color:var(--case-muted);font:14px/1.45 qqmf,monospace}.design-system-case .artifact-hero{width:min(100%,1000px)}.design-system-case .artifact-narrow{width:min(100%,520px)}
.design-system-case .artifact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2.5vw,28px);align-items:start}.design-system-case .research-artifacts .artifact:nth-child(1),.design-system-case .research-artifacts .artifact:nth-child(2){grid-column:span 6}.design-system-case .research-artifacts .artifact:nth-child(n+3){grid-column:span 4}.design-system-case .system-artifacts .artifact:first-child{grid-column:span 8}.design-system-case .system-artifacts .artifact:nth-child(2){grid-column:span 4}.design-system-case .system-artifacts .artifact:nth-child(n+3){grid-column:span 6}
.design-system-case .method-list{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 0;padding:0;list-style:none}.design-system-case .method-list li{padding:8px 10px;border:1px solid var(--case-line);color:var(--case-muted);font:13px/1.25 qqmf,monospace}
.design-system-case .insight-list,.design-system-case .principle-list{display:grid;gap:1px;margin-top:26px;border:1px solid var(--case-line);background:var(--case-line)}.design-system-case .insight-list article,.design-system-case .principle-list article{padding:22px 24px;background:var(--case-panel)}.design-system-case h3{margin:0;font-size:17px;line-height:1.3}.design-system-case .insight-list p,.design-system-case .principle-list p{margin:8px 0 0;color:var(--case-muted);font:17px/1.45 hrpf,system-ui}
.design-system-case .outcomes{padding:28px;border:1px solid rgba(62,255,146,.48);background:rgba(18,55,55,.38)}
.design-system-case .case-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:64px 0 0}.design-system-case .case-navigation a{display:flex;align-items:center;min-height:52px;padding:12px 16px;border:1px solid var(--case-line);color:var(--case-ink);font:700 14px/1.35 qqmf,monospace;text-decoration:none}.design-system-case .case-navigation a:hover{border-color:var(--case-acid);background:rgba(62,255,146,.11)}
.design-system-case .case-copy,.design-system-case .case-copy *{color:inherit}.design-system-case .case-copy h2,.design-system-case .case-copy h3{color:var(--case-acid)}
@media(max-width:700px){.design-system-case article{gap:48px}.design-system-case .brief-grid,.design-system-case .case-navigation{grid-template-columns:1fr}.design-system-case .artifact-grid{grid-template-columns:1fr}.design-system-case .research-artifacts .artifact,.design-system-case .system-artifacts .artifact{grid-column:auto}.design-system-case .case-dek{font-size:22px}.design-system-case .outcomes{padding:21px}}
@media(prefers-reduced-motion:reduce){.design-system-case *{scroll-behavior:auto}}