/* case-study.css — Case study page styles */
.cs-header { padding-top: calc(var(--space-32) + var(--space-16)); padding-bottom: var(--space-12); }
.cs-header__meta { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-6); }
.cs-separator { opacity:.4; }
.cs-header__title { font-family:var(--font-display); font-weight:800; font-size:clamp(2.5rem,6vw,5rem); letter-spacing:-0.03em; margin-bottom:var(--space-8); max-width:14ch; }
.cs-header__info { display:flex; align-items:flex-start; gap:var(--space-12); padding-top:var(--space-6); border-top:1px solid var(--border); }
.cs-header__role { display:flex; flex-direction:column; gap:var(--space-2); }
.info-label { color:var(--text-secondary); }
.info-value  { font-size:var(--text-sm); color:var(--text-primary); max-width:280px; }
.cs-header__tags { display:flex; gap:var(--space-2); flex-wrap:wrap; padding-top:1.1rem; }

.cs-hero { width:100%; height:clamp(320px,60vh,700px); overflow:hidden; background-color:var(--bg-surface); }
.cs-hero img, .cs-hero video { width:100%; height:100%; object-fit:cover; }

.cs-body { padding-top:var(--space-16); padding-bottom:var(--space-16); }

.cs-section { margin-bottom:var(--space-16); }
.cs-section__label { display:block; color:var(--text-secondary); margin-bottom:var(--space-4); padding-bottom:var(--space-4); border-bottom:1px solid var(--border); }
.cs-section__title { font-family:var(--font-display); font-weight:700; font-size:var(--text-2xl); letter-spacing:-0.02em; margin-bottom:var(--space-4); }
.cs-section__text { font-size:var(--text-base); color:var(--text-secondary); line-height:1.75; }
.cs-section__text + .cs-section__text { margin-top:var(--space-4); }

.cs-image { width:100%; border-radius:3px; overflow:hidden; background-color:var(--bg-surface); margin-block:var(--space-8); }
.cs-image img { width:100%; height:auto; }
.cs-image--tall { aspect-ratio:4/3; }
.cs-image--tall img { height:100%; object-fit:cover; }

.cs-quote { font-family:var(--font-display); font-style:italic; font-size:var(--text-2xl); line-height:1.4; color:var(--text-primary); border-left:2px solid var(--accent); padding-left:var(--space-6); margin-block:var(--space-12); }

.cs-outcome { background-color:var(--bg-surface); border-radius:3px; padding:var(--space-8); margin-top:var(--space-8); }
.cs-outcome__label { display:block; font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:0.06em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--space-3); }
.cs-outcome__text { font-size:var(--text-base); line-height:1.75; color:var(--text-secondary); }

.cs-stack { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-4); }

.cs-next { margin-top:var(--space-32); }
.cs-next__link { display:flex; flex-direction:column; gap:var(--space-3); padding-block:var(--space-12); transition:color var(--dur-fast) var(--ease-out); }
.cs-next__link:hover .cs-next__title { color:var(--accent); }
.cs-next__label { color:var(--text-secondary); }
.cs-next__title { font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,5vw,4rem); letter-spacing:-0.03em; transition:color var(--dur-fast) var(--ease-out); }

@media (max-width:640px) {
  .cs-header__info { flex-direction:column; gap:var(--space-6); }
  .cs-body { padding-inline:var(--space-6); }
  .cs-next__link { padding-block:var(--space-8); }
}