/* Case studies, evidence-based KPIs, community experience and ecosystems.
   Built on the existing design tokens (void, asphalt, bone, mist, signal) and the
   .panel / .ticked / .eyebrow / .lift primitives from site.css. */

/* Shared section heading spacing */
.sec-lede { margin-top: 1.25rem; max-width: 44rem; font-size: 15px; line-height: 1.65; color: var(--color-mist); }

/* Evidence level chips — used by KPIs, case studies and exhibits */
.ev { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid oklch(100% 0 0 / .12); padding: .2rem .5rem; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-mist); white-space: nowrap; }
.ev::before { content: ""; height: 5px; width: 5px; border-radius: 999px; background: currentColor; }
.ev-doc { border-color: oklch(82% .17 85 / .4); background: oklch(82% .17 85 / .08); color: var(--color-signal); }
.ev-rep { border-color: oklch(66% .02 252 / .45); color: oklch(85% .01 252); }

/* KPI board */
.kpi-grid { display: grid; gap: 1px; margin-top: 2.75rem; background: oklch(100% 0 0 / .06); border: 1px solid oklch(100% 0 0 / .06); }
@media (min-width: 640px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { display: flex; flex-direction: column; gap: .2rem; padding: 1.6rem 1.5rem 1.5rem; background: oklch(15% .014 259 / .92); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.kpi-proj { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: oklch(82% .17 85 / .75); }
.kpi-num { margin-top: 1.1rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.1rem); line-height: .95; color: var(--color-signal); letter-spacing: .01em; }
.kpi-num small { font-size: .45em; font-weight: 500; color: var(--color-bone); letter-spacing: .04em; margin-left: .15em; }
.kpi-label { margin-top: .7rem; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-bone); }
.kpi-ctx { margin-top: .55rem; font-size: 13px; line-height: 1.55; color: var(--color-mist); }
.kpi-src { margin-top: auto; padding-top: 1rem; font-size: 12px; line-height: 1.5; color: oklch(66% .02 252 / .9); border-top: 1px dashed oklch(100% 0 0 / .08); }
.kpi-src a { color: var(--color-signal); text-decoration: underline; text-decoration-color: oklch(82% .17 85 / .4); text-underline-offset: 3px; }
.kpi-src b { font-weight: 500; color: oklch(95% .005 250 / .8); }
.kpi-key { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.1rem; font-size: 12.5px; color: var(--color-mist); }

/* Case studies */
.cs-list { display: grid; gap: 1.5rem; margin-top: 2.75rem; }
.cs { padding: 1.75rem; scroll-margin-top: 5.5rem; }
@media (min-width: 768px) { .cs { padding: 2.5rem; } }
.cs-feature { border-color: oklch(82% .17 85 / .28); background: linear-gradient(165deg, oklch(82% .17 85 / .06), transparent 45%), oklch(15% .014 259 / .9); }
.cs-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.cs-index { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: oklch(82% .17 85 / .75); }
.cs-chip { border: 1px solid oklch(100% 0 0 / .1); padding: .22rem .55rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-mist); }
.cs-chip-chain { border-color: oklch(82% .17 85 / .25); background: oklch(82% .17 85 / .05); color: var(--color-signal); }
.cs-title { margin-top: 1.2rem; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.1rem); line-height: .95; text-transform: uppercase; color: var(--color-bone); }
.cs-sub { margin-top: .8rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-mist); }
.cs-sub b { font-weight: 400; color: var(--color-signal); }
.cs-value { margin-top: 1.4rem; max-width: 46rem; border-left: 1px solid oklch(82% .17 85 / .55); padding-left: 1rem; font-size: 15px; line-height: 1.65; color: oklch(95% .005 250 / .9); }
.cs-body { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 1024px) { .cs-body { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 2.5rem; } }
.cs-steps { display: grid; gap: 1px; background: oklch(100% 0 0 / .06); border: 1px solid oklch(100% 0 0 / .06); }
@media (min-width: 640px) { .cs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-step { padding: 1.2rem 1.25rem 1.3rem; background: oklch(13% .012 260 / .92); }
.cs-step-wide { grid-column: 1 / -1; }
.cs-step h4 { display: flex; align-items: baseline; gap: .55rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-signal); }
.cs-step h4 span { color: oklch(66% .02 252 / .6); }
.cs-step p, .cs-step li { margin-top: .6rem; font-size: 13.5px; line-height: 1.6; color: var(--color-mist); }
.cs-step ul { margin-top: .25rem; }
.cs-step li { position: relative; margin-top: .4rem; padding-left: 1rem; }
.cs-step li::before { content: ""; position: absolute; left: 0; top: .62em; height: 4px; width: 4px; background: oklch(82% .17 85 / .7); }
.cs-step strong { font-weight: 500; color: var(--color-bone); }
.cs-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; margin-top: .7rem; }
.cs-result-num { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--color-signal); }
.cs-ev-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-bone); }
.cs-ev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .9rem; }
.cs-ev-grid.one { grid-template-columns: minmax(0, 1fr); max-width: 18rem; }
.cs-ev-note { margin-top: 1rem; font-size: 12.5px; line-height: 1.6; color: var(--color-mist); }
.cs-ev-note a { color: var(--color-signal); text-decoration: underline; text-decoration-color: oklch(82% .17 85 / .4); text-underline-offset: 3px; }

/* Evidence thumbnails — the whole screenshot stays visible (no cropping) */
.ev-thumb { display: flex; flex-direction: column; width: 100%; text-align: left; cursor: zoom-in; border: 1px solid oklch(100% 0 0 / .08); background: oklch(10% .01 260); color: inherit; transition: border-color .2s; }
.ev-thumb:hover { border-color: oklch(82% .17 85 / .4); }
.ev-thumb:focus-visible { outline: 1px solid var(--color-signal); outline-offset: 3px; }
.ev-thumb-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 5; padding: .5rem; }
.ev-thumb-img img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.ev-thumb-cap { display: block; border-top: 1px solid oklch(100% 0 0 / .06); padding: .55rem .65rem .65rem; font-family: var(--font-mono); font-size: 9.5px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--color-mist); }
.ev-thumb-cap b { display: block; font-weight: 400; color: var(--color-bone); }
.ev-thumb:hover .ev-thumb-cap b { color: var(--color-signal); }
.sr-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ev-empty { display: flex; flex-direction: column; justify-content: center; gap: .5rem; border: 1px dashed oklch(100% 0 0 / .14); padding: 1.25rem; font-size: 13px; line-height: 1.55; color: var(--color-mist); }
.ev-empty b { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--color-bone); }

/* Home: case study teasers */
.cst-grid { display: grid; gap: 1rem; margin-top: 2.75rem; }
@media (min-width: 1024px) { .cst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cst-grid > :first-child { grid-row: span 2; } }
.cst { display: flex; flex-direction: column; height: 100%; padding: 1.75rem; transition: border-color .2s, transform .2s; }
.cst:hover { border-color: oklch(82% .17 85 / .35); transform: translateY(-2px); }
.cst-title { margin-top: 1rem; font-family: var(--font-display); font-size: clamp(1.7rem, 3.6vw, 2.3rem); line-height: .95; text-transform: uppercase; color: var(--color-bone); transition: color .2s; }
.cst:hover .cst-title { color: var(--color-signal); }
.cst-text { margin-top: .9rem; font-size: 14px; line-height: 1.6; color: var(--color-mist); }
.cst-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; margin-top: 1.2rem; }
.cst-shot { display: flex; justify-content: center; margin-top: 1.5rem; border: 1px solid oklch(100% 0 0 / .08); background: oklch(10% .01 260); padding: .75rem; }
.cst-shot img { max-height: 22rem; width: auto; object-fit: contain; }
.cst-link { margin-top: auto; padding-top: 1.4rem; display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-signal); }

/* Community experience areas */
.area-grid { display: grid; gap: 1rem; margin-top: 2.75rem; }
@media (min-width: 768px) { .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.area { display: flex; flex-direction: column; height: 100%; padding: 1.6rem; }
.area h3 { margin-top: .9rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; text-transform: uppercase; color: var(--color-bone); }
.area ul { margin-top: 1rem; }
.area li { position: relative; margin-top: .45rem; padding-left: 1rem; font-size: 13.5px; line-height: 1.55; color: var(--color-mist); }
.area li::before { content: ""; position: absolute; left: 0; top: .6em; height: 4px; width: 4px; background: oklch(82% .17 85 / .7); }
.area-where { margin-top: auto; padding-top: 1.1rem; font-family: var(--font-mono); font-size: 10px; line-height: 1.6; letter-spacing: .14em; text-transform: uppercase; color: oklch(66% .02 252 / .9); }
.area-where b { font-weight: 400; color: oklch(82% .17 85 / .8); }

/* Ecosystems */
.eco-grid { display: grid; gap: 1rem; margin-top: 2.75rem; }
@media (min-width: 768px) { .eco-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eco { display: flex; flex-direction: column; height: 100%; padding: 1.6rem; }
.eco-mark { display: inline-flex; height: 2.4rem; width: 2.4rem; align-items: center; justify-content: center; border: 1px solid oklch(82% .17 85 / .35); background: oklch(82% .17 85 / .07); font-family: var(--font-display); font-size: 1rem; letter-spacing: .06em; color: var(--color-signal); }
.eco h3 { margin-top: 1.1rem; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; text-transform: uppercase; color: var(--color-bone); }
.eco-kind { margin-top: .5rem; }
.eco p { margin-top: .9rem; font-size: 13.5px; line-height: 1.6; color: var(--color-mist); }
.eco-note { margin-top: 1.1rem; font-size: 12px; line-height: 1.6; color: oklch(66% .02 252 / .85); }

/* Supporting-role line under the main headline */
.role-support { margin-top: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--color-mist); }
.role-support span:not(:first-child) { border: 1px solid oklch(100% 0 0 / .12); padding: .2rem .55rem; color: oklch(95% .005 250 / .85); }

/* Proof page: what each exhibit proves */
.pow-proves { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .9rem; }
.ev-legend { display: grid; gap: 1px; margin-top: 2rem; background: oklch(100% 0 0 / .06); border: 1px solid oklch(100% 0 0 / .06); }
@media (min-width: 768px) { .ev-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ev-legend div { padding: 1.1rem 1.2rem; background: oklch(13% .012 260 / .9); font-size: 13px; line-height: 1.55; color: var(--color-mist); }
.ev-legend b { display: block; margin-bottom: .35rem; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--color-bone); }

/* Lightbox: link to the untouched original file */
.pow-lb-orig { display: inline-block; margin-top: .55rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-signal); }
.pow-lb-orig:hover { color: var(--color-bone); }