.work-index-hero,.case-detail-hero{padding-block:var(--space-24);border-bottom:var(--rule)}
.work-index-hero h1,.case-detail-hero h1{max-width:var(--work-case-title-width);font:var(--type-display-lg);letter-spacing:var(--tracking-display)}
.work-index-hero h2,.case-detail-hero h2{max-width:var(--work-hero-width);margin-top:var(--space-8);font:var(--type-body-lg);font-weight:var(--weight-regular);letter-spacing:var(--tracking-body)}
.work-index-list{border-top:var(--rule)}
.work-index-row{display:grid;grid-template-columns:var(--grid-columns);column-gap:var(--grid-gap);align-items:center;padding-block:var(--space-8);border-bottom:var(--rule);transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.work-index-row:hover{color:var(--red)}
.work-index-row:focus-visible{outline:0;box-shadow:var(--shadow-focus)}
.work-index-row .case-index{grid-column:1}
.work-index-row__content{grid-column:2 / span 9}
.work-index-row__content p{color:var(--graphite);font:var(--type-mono-small);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.work-index-row__content h2{max-width:var(--work-case-title-width);margin-top:var(--space-3);font:var(--type-heading-lg);letter-spacing:var(--tracking-heading)}
.work-index-row__arrow{grid-column:12;justify-self:end;font:var(--type-marker)}
.also-built{padding-block:var(--space-16);background:var(--mist);border-bottom:var(--rule)}
.also-built__label{font:var(--type-mono-small);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.also-built ul{max-width:var(--reading-width);margin:var(--space-8) 0 0;padding:0;list-style:none}
.also-built li{padding-top:var(--space-3);border-top:var(--rule-soft)}
.also-built li+li{margin-top:var(--space-3)}

.case-meta-band{padding-block:var(--space-6);border-bottom:var(--rule-soft);color:var(--graphite);font:var(--type-mono-small);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.case-detail-hero{padding-block:var(--space-16) var(--space-24)}
.case-detail-hero h2{max-width:var(--work-case-lead-width)}
.case-detail-section{padding-block:var(--space-16);border-bottom:var(--rule-soft)}
.case-detail-grid{display:grid;grid-template-columns:var(--grid-columns);column-gap:var(--grid-gap)}
.case-detail-grid>h2{grid-column:1 / span 3;font:var(--type-heading-md);letter-spacing:var(--tracking-heading)}
.case-detail-copy{grid-column:4 / span 6;max-width:var(--work-case-content-width)}
.case-detail-copy p+p{margin-top:var(--space-6)}
.case-detail-constraint{padding-block:var(--space-16);background:var(--mist);border-bottom:var(--rule)}
.case-detail-constraint .case-detail-copy{padding-left:var(--space-6);border-left:var(--work-case-constraint-rule-width) solid var(--red)}
.case-process{padding-block:var(--space-16);border-bottom:var(--rule-soft)}
.case-process--mobile{display:none}
.case-process__heading{font:var(--type-mono-small);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.case-process__diagram{width:100%;aspect-ratio:var(--work-case-diagram-aspect);margin-top:var(--space-8);border:var(--rule);background:var(--paper)}
.case-process__diagram text{font:var(--type-mono);letter-spacing:var(--tracking-mono);fill:var(--carbon)}
.case-process__diagram .diagram-line{stroke:var(--carbon);stroke-width:var(--work-case-diagram-stroke-width);fill:none}
.case-process__diagram .diagram-node{fill:var(--mist);stroke:var(--carbon);stroke-width:var(--work-case-diagram-stroke-width)}
.case-process__diagram .diagram-branch{stroke:var(--red);stroke-width:var(--work-case-diagram-stroke-width);fill:none}
.case-process__diagram .diagram-branch-node{fill:var(--paper);stroke:var(--red);stroke-width:var(--work-case-diagram-stroke-width)}
.case-process__diagram .diagram-branch-label{fill:var(--red)}
.case-flowchart{margin-top:var(--space-8)}
.case-flowchart__diagram{display:none;width:100%;height:auto}
.case-flowchart__diagram--desktop{display:block}
.flowchart-routes path{fill:none;stroke:var(--carbon);stroke-width:var(--work-case-diagram-stroke-width);vector-effect:non-scaling-stroke}
.flowchart-routes .flowchart-route--control{stroke:var(--red);stroke-width:var(--work-flowchart-control-stroke-width)}
.flowchart-node>rect:first-child{fill:var(--paper);stroke:var(--carbon);stroke-width:var(--work-case-diagram-stroke-width)}
.flowchart-node--control>rect:first-child{stroke:var(--red);stroke-width:var(--work-flowchart-control-stroke-width)}
.flowchart-node__divider{fill:none;stroke:var(--stone);stroke-width:var(--work-case-diagram-stroke-width)}
.flowchart-icon{fill:none;stroke:var(--carbon);stroke-width:var(--work-case-diagram-stroke-width);stroke-linecap:round;stroke-linejoin:round}
.flowchart-node--control .flowchart-icon{stroke:var(--red)}
.flowchart-node__title{fill:var(--carbon);font:var(--type-work-flowchart-title);letter-spacing:var(--tracking-heading)}
.flowchart-node__meta{fill:var(--graphite);font:var(--type-work-flowchart-meta);letter-spacing:var(--tracking-mono)}
.flowchart-node--control .flowchart-node__title,.flowchart-node--control .flowchart-node__meta{fill:var(--red)}
.flowchart-port{width:var(--work-flowchart-port-size);height:var(--work-flowchart-port-size);fill:var(--carbon)}
.flowchart-node--control .flowchart-port{fill:var(--red)}
.case-process__caption{max-width:var(--work-case-content-width);margin-top:var(--space-4);color:var(--graphite);font:var(--type-body-sm)}
.case-interface{padding-block:var(--space-16);border-bottom:var(--rule-soft)}
.case-interface__frame{display:grid;place-items:center;min-height:0;aspect-ratio:var(--work-case-interface-aspect);margin-top:var(--space-8);border:var(--rule-soft);background:var(--mist);text-align:center}
.case-interface__frame strong{display:block;font:var(--type-mono-small);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.case-interface__frame p{max-width:var(--narrow-width);margin-top:var(--space-3);color:var(--graphite);font:var(--type-body-sm)}
.case-next{display:flex;align-items:end;justify-content:space-between;gap:var(--space-8);padding-block:var(--space-12);border-bottom:var(--rule)}
.case-next__label{color:var(--graphite);font:var(--type-mono-small);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.case-next h2{max-width:var(--work-case-title-width);margin-top:var(--space-2);font:var(--type-heading-md);letter-spacing:var(--tracking-heading)}
.case-next__arrow{font:var(--type-marker)}

@media (min-width:601px) and (max-width:1200px){
  .work-index-row .case-index{grid-column:1}
  .work-index-row__content{grid-column:2 / span 6}
  .work-index-row__arrow{grid-column:8}
  .case-detail-grid>h2{grid-column:1 / span 3}
  .case-detail-copy,.case-detail-constraint .case-detail-copy{grid-column:4 / -1}
}

@media (max-width:1100px){
  .case-flowchart__diagram--desktop{display:none}
  .case-flowchart__diagram--tablet{display:block}
}

@media (max-width:600px){
  .work-index-hero,.case-detail-hero{padding-block:var(--space-16)}
  .work-index-row{grid-template-columns:var(--row-number-column) minmax(0,1fr);column-gap:var(--space-3);padding-block:var(--space-6)}
  .work-index-row .case-index{grid-column:1;grid-row:1}
  .work-index-row__content{grid-column:2;grid-row:1}
  .work-index-row__content h2{font:var(--type-heading-md)}
  .work-index-row__arrow{display:none}
  .also-built{padding-block:var(--space-12)}
  .case-meta-band{padding-block:var(--space-4);font:var(--type-mono-small)}
  .case-detail-section,.case-detail-constraint,.case-process,.case-interface{padding-block:var(--space-12)}
  .case-detail-grid>h2,.case-detail-copy{grid-column:1 / -1}
  .case-detail-copy{margin-top:var(--space-6)}
  .case-detail-constraint .case-detail-copy{grid-column:1 / -1;padding-left:var(--space-4)}
  .case-process__diagram{aspect-ratio:auto;height:auto;min-height:var(--diagram-mobile-height)}
  .case-process__diagram text{font:var(--type-mono-small)}
  .case-flowchart__diagram--tablet{display:none}
  .case-flowchart__diagram--mobile{display:block}
  .case-process:not(.case-process--mobile):has(~.case-process--mobile){display:none}
  .case-process--mobile{display:block}
  .case-process--mobile .case-process__diagram{min-height:0}
  .case-next{align-items:start;gap:var(--space-4)}
  .case-next h2{font:var(--type-heading-md)}
}