/* case-studies.css — case study index and detail pages.
   Uses tokens only; no colour or size is declared here that tokens.css does
   not already own, so both themes and the .band inversion keep working. */

.cs-hero { padding-block: var(--sp-9) var(--sp-7); }
.cs-hero .sec-head { margin-bottom: 0; }
.cs-hero__title { font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0; max-width: 24ch; }
.cs-crumb { font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-ink-3); margin: 0 0 var(--sp-5); }
.cs-crumb a { color: inherit; }

.cs-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.cs-card { display: flex; flex-direction: column; gap: var(--sp-3); text-decoration: none; color: inherit; }
.cs-card__title { font-size: var(--fs-md); line-height: var(--lh-snug); margin: 0; }
.cs-card__lede { font-size: var(--fs-sm); color: var(--c-ink-2); margin: 0; flex: 1; }
.cs-card__meta { font-size: var(--fs-3xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-ink-3); margin: 0; padding-top: var(--sp-3); border-top: var(--sp-rule) solid var(--c-rule-faint); }

.cs-body { display: grid; gap: var(--sp-7); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) { .cs-body { grid-template-columns: minmax(0, 1fr) 22rem; } .cs-facts { position: sticky; top: calc(var(--sp-9) + var(--sp-4)); } }
.cs-prose { max-width: var(--ms-body); }
.cs-prose h2 { font-size: var(--fs-lg); margin: var(--sp-7) 0 var(--sp-3); }
.cs-prose h2:first-child { margin-top: 0; }
.cs-prose p { color: var(--c-ink-2); line-height: var(--lh-body); margin: 0 0 var(--sp-4); }

.cs-facts dl { margin: 0; display: grid; gap: var(--sp-3); }
.cs-fact { display: grid; gap: var(--sp-1); padding-bottom: var(--sp-3); border-bottom: var(--sp-rule) solid var(--c-rule-faint); }
.cs-fact dt { font-family: var(--ff-mono); font-size: var(--fs-3xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-ink-3); }
.cs-fact dd { margin: 0; font-size: var(--fs-sm); color: var(--c-ink); }
.cs-facts__note { font-size: var(--fs-2xs); color: var(--c-ink-3); margin: var(--sp-4) 0 0; }

.cs-figs { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); }
.cs-fig { margin: 0; }
.cs-fig a { display: block; background: #fff; border: var(--sp-rule) solid var(--c-rule); border-radius: var(--r-3); overflow: hidden; }
.cs-fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; }
.cs-fig figcaption { font-size: var(--fs-xs); color: var(--c-ink-2); margin-top: var(--sp-2); }
.cs-note { color: var(--c-ink-2); max-width: var(--ms-body); margin: 0; }

.cs-next { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; }
.cs-next__link { display: grid; gap: var(--sp-1); text-decoration: none; color: var(--c-ink); font-family: var(--ff-display); font-size: var(--fs-md); text-align: right; max-width: 36ch; }
.cs-next__link:hover { color: var(--c-mark-ink); }