/* pages/work-detail.css — case-study template (Site Map & Content v3.1 §2.2.1) */
.cs-hero{max-width:62rem}
.cs-hero .tag{display:block;margin-bottom:var(--space-4)}
.cs-hero h1{font-size:clamp(36px,5.6vw,84px);font-weight:600;letter-spacing:-.045em;line-height:.98;max-width:16ch}
.cs-hero .descriptor{margin-top:24px;color:#6b6b66;font-size:clamp(17px,1.6vw,20px);line-height:1.5;max-width:56ch}
.cs-media{margin:var(--space-8) 0;aspect-ratio:16/8;border:1px solid var(--soft-grey);border-radius:24px;overflow:hidden;background:var(--near-black)}
.cs-media .viz svg{width:100%;height:100%}
.cs-section{display:grid;grid-template-columns:140px 1fr;gap:var(--space-6);padding:var(--space-7) 0;border-top:1px solid var(--soft-grey)}
.cs-section .n{font-family:var(--mono);font-size:13px;color:var(--cobalt);letter-spacing:.08em}
.cs-section h2{font-size:clamp(23px,3vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.06;margin-bottom:20px}
.cs-section p{color:#3f3f3b;font-size:18px;line-height:1.6;max-width:64ch}
.cs-section.question p{font-family:var(--display);font-size:clamp(24px,3.4vw,44px);color:var(--cobalt);letter-spacing:-.03em;line-height:1.1;max-width:18ch}
.cs-result .big{font-family:var(--display);font-weight:600;font-size:clamp(40px,6vw,88px);letter-spacing:-.045em;line-height:.98}
.cs-learned p{font-family:var(--display);font-size:clamp(22px,2.8vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.2;max-width:24ch}
.cs-tech{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.cs-tech li{font-family:var(--mono);font-size:12.5px;border:1px solid var(--soft-grey);border-radius:999px;padding:6px 13px;color:var(--mid-grey)}
.cs-related{margin-top:var(--space-8);padding-top:var(--space-7);border-top:1px solid var(--soft-grey)}
.cs-related .jt-kicker{margin-bottom:var(--space-5)}
.cs-related-grid{margin-top:var(--space-5);display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:768px){
  .cs-section{grid-template-columns:1fr;gap:var(--space-3)}
  .cs-related-grid{grid-template-columns:1fr}
}