/* Case study page. Editorial shell, long-form reading. Tokens only, so themes and view modes apply. */

.case-study-page .cs-hero { margin-top:var(--site-hero-gap); }
.case-study-page .cs-hero h1 { margin:10px 0 14px; font-size:clamp(36px,10.5vw,54px); line-height:1.02; letter-spacing:-.055em; text-wrap:balance; }
.case-study-page .cs-lede { max-width:520px; margin:0; color:var(--kb-secondary); font-size:15px; line-height:1.6; }

.case-study-page .cs-meta { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; margin:24px 0 0; padding:16px 0 0; border-top:1px solid var(--kb-rule); }
.case-study-page .cs-meta div { min-width:0; }
.case-study-page .cs-meta dt { margin:0 0 3px; color:var(--kb-purple); font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; }
.case-study-page .cs-meta dd { margin:0; color:var(--kb-fg); font-size:13px; line-height:1.45; }

.case-study-page .cs-body { margin-top:36px; }
.case-study-page .cs-section { padding:28px 0 4px; border-top:1px solid var(--kb-rule); }
.case-study-page .cs-num { margin:0 0 6px; color:var(--kb-purple); font-size:10px; font-weight:600; letter-spacing:2px; }
.case-study-page .cs-section h2 { margin:0 0 14px; color:var(--kb-fg); font-size:clamp(24px,6.6vw,32px); font-weight:700; line-height:1.1; letter-spacing:-.04em; }
.case-study-page .cs-section p,
.case-study-page .cs-section li { color:var(--kb-secondary); font-size:15px; line-height:1.65; }
.case-study-page .cs-section p { max-width:600px; margin:0 0 14px; }
.case-study-page .cs-section strong { color:var(--kb-fg); font-weight:600; }
.case-study-page .cs-section code { padding:1px 5px; border-radius:4px; background:var(--kb-surface); color:var(--kb-fg); font-size:.88em; }

.case-study-page .cs-findings,
.case-study-page .cs-steps { max-width:600px; margin:0 0 16px; padding:0 0 0 20px; }
.case-study-page .cs-findings li,
.case-study-page .cs-steps li { margin:0 0 8px; padding-left:4px; }
.case-study-page .cs-findings li::marker,
.case-study-page .cs-steps li::marker { color:var(--kb-purple); }

.case-study-page .cs-case { margin:20px 0 18px; padding:18px 16px 4px; border:1px solid var(--kb-rule); border-radius:var(--kb-radius); background:var(--kb-surface); }
.case-study-page .cs-case h3 { margin:0 0 10px; color:var(--kb-fg); font-size:18px; font-weight:700; line-height:1.25; letter-spacing:-.02em; }
.case-study-page .cs-case p { font-size:14px; }
.case-study-page .cs-tried { padding:10px 0 0; border-top:1px dashed var(--kb-rule); }
.case-study-page .cs-tried span { display:block; margin:0 0 3px; color:var(--kb-purple); font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; }

.case-study-page .cs-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 18px; padding:0; list-style:none; }
.case-study-page .cs-stats li { display:flex; flex-direction:column; gap:4px; margin:0; padding:14px; border:1px solid var(--kb-rule); border-radius:var(--kb-radius); }
.case-study-page .cs-stats strong { color:var(--kb-purple); font-size:28px; font-weight:700; line-height:1; letter-spacing:-.04em; }
.case-study-page .cs-stats span { color:var(--kb-secondary); font-size:12px; line-height:1.4; }

.case-study-page .cs-links { margin:24px 0 8px; }

/* Playground list: thumbnail left, text right; one row per experiment. */
.case-study-page .cs-tools { display:flex; flex-direction:column; gap:10px; margin:6px 0 18px; padding:0; list-style:none; }
.case-study-page .cs-tools li { margin:0; padding:0; }
.case-study-page .cs-tool { display:grid; grid-template-columns:104px 1fr; gap:14px; align-items:start; padding:12px; border:1px solid var(--kb-rule); border-radius:var(--kb-radius); color:inherit; text-decoration:none; transition:background .2s ease, border-color .2s ease; }
.case-study-page .cs-tool:hover,
.case-study-page .cs-tool:focus-visible { background:var(--kb-surface); border-color:var(--kb-purple); }
.case-study-page .cs-tool img { display:block; width:100%; max-width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:calc(var(--kb-radius) - 3px); background:var(--kb-surface); }
.case-study-page .cs-tool__text { display:flex; flex-direction:column; gap:4px; min-width:0; }
.case-study-page .cs-tool__kind { color:var(--kb-purple); font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; }
.case-study-page .cs-tool__name { color:var(--kb-fg); font-size:17px; font-weight:700; line-height:1.2; letter-spacing:-.02em; }
.case-study-page .cs-tool__what { color:var(--kb-secondary); font-size:13px; line-height:1.55; }
.case-study-page .cs-tool__detail { color:var(--kb-muted); font-size:12px; line-height:1.55; }
.case-study-page .cs-tool__open { display:inline-flex; align-items:center; gap:6px; margin-top:4px; color:var(--kb-purple); font-size:10px; font-weight:600; letter-spacing:2px; }
.case-study-page .cs-tool__open svg { transition:transform .2s ease; }
.case-study-page .cs-tool:hover .cs-tool__open svg { transform:translateX(3px); }
@media (max-width:380px) { .case-study-page .cs-tool { grid-template-columns:84px 1fr; gap:12px; } }
@media (prefers-reduced-motion:reduce) { .case-study-page .cs-tool, .case-study-page .cs-tool__open svg { transition:none; } }

/* Token pipeline: three steps joined by a rail, each ending in the file it hands on. */
.case-study-page .cs-pipeline { display:flex; flex-direction:column; gap:0; max-width:600px; margin:6px 0 18px; padding:0; list-style:none; counter-reset:none; }
.case-study-page .cs-pipeline li { position:relative; display:flex; flex-direction:column; gap:5px; margin:0; padding:0 0 20px 26px; }
.case-study-page .cs-pipeline li::before { content:""; position:absolute; top:5px; left:4px; width:9px; height:9px; border:2px solid var(--kb-purple); border-radius:50%; background:var(--kb-bg); }
.case-study-page .cs-pipeline li::after { content:""; position:absolute; top:19px; bottom:2px; left:9px; width:1px; background:var(--kb-rule); }
.case-study-page .cs-pipeline li:last-child { padding-bottom:4px; }
.case-study-page .cs-pipeline li:last-child::after { display:none; }
.case-study-page .cs-pipeline__step { color:var(--kb-purple); font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; }
.case-study-page .cs-pipeline strong { color:var(--kb-fg); font-size:17px; font-weight:700; line-height:1.2; letter-spacing:-.02em; }
.case-study-page .cs-pipeline li > span:not(.cs-pipeline__step) { color:var(--kb-secondary); font-size:14px; line-height:1.6; }
.case-study-page .cs-pipeline code { align-self:flex-start; margin-top:2px; padding:3px 8px; border:1px solid var(--kb-rule); border-radius:4px; background:var(--kb-surface); color:var(--kb-fg); font-size:12px; }

@media (min-width:720px) {
  .case-study-page .cs-meta { grid-template-columns:repeat(4,1fr); }
  .case-study-page .cs-stats { grid-template-columns:repeat(4,1fr); }
}

/* View modes: keep the editorial labels in each mode's display face. */
:root[data-kb-mode="pixel"] .case-study-page :is(h3,.cs-num,.cs-meta dt,.cs-tried span,.cs-stats strong,.cs-tool__kind,.cs-tool__name,.cs-tool__open,.cs-pipeline__step,.cs-pipeline strong) { font-family:var(--kb-pixel-display); font-weight:400; letter-spacing:0; }
:root[data-kb-mode="pixel"] .case-study-page :is(.cs-case,.cs-stats li,.cs-tool) { border-width:2px; box-shadow:var(--kb-pixel-shadow); }
:root[data-kb-mode="ascii"] .case-study-page :is(h3,dt,dd,strong,code) { font-family:var(--kb-mono); letter-spacing:0; }
:root[data-kb-mode="ascii"] .case-study-page :is(.cs-case,.cs-stats li,.cs-tool) { border-style:dashed; background:transparent; }
:root[data-kb-mode="pixel"] .case-study-page .cs-pipeline li::before { border-radius:0; }
:root[data-kb-mode="ascii"] .case-study-page .cs-pipeline li::before { content:"o"; top:0; left:4px; width:auto; height:auto; border:0; background:none; color:var(--kb-purple); font-family:var(--kb-mono); font-size:14px; line-height:1.2; }
:root[data-kb-mode="ascii"] .case-study-page .cs-pipeline li::after { width:0; border-left:1px dashed var(--kb-rule); background:none; }