/* Case-study pages. Uses the portfolio's theme variables (light/dark follow the device). */
body{background:var(--bg);color:var(--text-main);line-height:1.7}
.cs-bar{position:sticky;top:0;z-index:40;background:rgb(var(--bg-rgb)/.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.cs-nav{max-width:72rem;margin:0 auto;padding:.5rem 1rem;display:flex;align-items:center;gap:1.25rem;min-height:3.5rem}
.cs-nav a{font-weight:700;font-size:.9rem;padding:.6rem 0;min-height:44px;display:inline-flex;align-items:center}
.cs-nav a:hover{color:var(--accent-ink)}
.cs-home{font-family:Outfit,system-ui,sans-serif;font-weight:900;font-size:1.15rem;margin-right:auto}
.cs-cta{border:1px solid var(--border);border-radius:.75rem;padding:0 1rem!important;background:var(--surface)}
.cs-hero,.cs-toc,.cs-section,.cs-more{max-width:56rem;margin-inline:auto;padding-inline:1rem}
.cs-hero{padding-block:4rem 2rem}
.cs-kicker{font:700 .75rem/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 1rem}
.cs-hero h1{font-family:Outfit,system-ui,sans-serif;font-weight:900;font-size:clamp(2rem,6vw,3.6rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 1.25rem;text-wrap:balance}
.cs-lede{font-size:1.15rem;color:var(--text-muted);max-width:42rem;margin:0 0 1.5rem}
.cs-status{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:.85rem;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.4rem .9rem;margin:0 0 2rem}
.cs-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--green-ink)}
.cs-dot.soon{background:var(--amber-ink)}.cs-dot.client{background:var(--accent-ink)}
.cs-facts{display:grid;gap:1rem;margin:0 0 1.5rem;padding:1.25rem;border:1px solid var(--border);border-radius:1rem;background:var(--surface)}
.cs-facts dt{font:700 .65rem/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.35rem}
.cs-facts dd{margin:0;font-weight:500}
.cs-links{display:flex;flex-wrap:wrap;gap:1.25rem;margin:0}
.cs-links a,.cs-end a{font-weight:700;text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.cs-links a:hover,.cs-end a:hover{color:var(--accent-ink)}
.cs-toc{padding-block:1rem 2rem}
.cs-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.cs-toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;border:1px solid var(--border);border-radius:999px;font-size:.85rem;font-weight:600;color:var(--text-muted)}
.cs-toc a:hover{color:var(--text-main);border-color:var(--accent-ink)}
.cs-section{padding-block:2.5rem;border-top:1px solid var(--border);display:grid;gap:.75rem;scroll-margin-top:4rem}
.cs-no{font:700 .8rem/1 "JetBrains Mono",monospace;color:var(--accent-ink);margin:.4rem 0 0}
.cs-body{max-width:42rem}
.cs-body h2{font-family:Outfit,system-ui,sans-serif;font-weight:700;font-size:clamp(1.5rem,3.5vw,2rem);line-height:1.15;margin:0 0 1rem}
.cs-body h3{font-family:Outfit,system-ui,sans-serif;font-weight:700;font-size:1.15rem;margin:1.75rem 0 .5rem}
.cs-body p{margin:0 0 1rem;color:var(--text-main)}
.cs-body ul{margin:0 0 1rem;padding-left:1.25rem;display:grid;gap:.5rem}
.cs-body li{color:var(--text-main)}.cs-body li::marker{color:var(--accent-ink)}
.cs-more{padding-block:3rem;border-top:1px solid var(--border)}
.cs-more h2{font-family:Outfit,system-ui,sans-serif;font-weight:700;font-size:1.4rem;margin:0 0 1rem}
.cs-more ul{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:.75rem}
.cs-more li a{display:grid;gap:.15rem;padding:1rem 1.25rem;border:1px solid var(--border);border-radius:1rem;background:var(--surface)}
.cs-more li a:hover{border-color:var(--accent-ink)}
.cs-more li span{color:var(--text-muted);font-size:.9rem}
.cs-end{margin:0;color:var(--text-muted)}
.cs-foot{max-width:56rem;margin:0 auto;padding:2rem 1rem 3rem;color:var(--text-muted);font-size:.85rem;border-top:1px solid var(--border)}
.cs-foot a{text-decoration:underline}
a:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:.25rem}
@media (min-width:768px){
  .cs-hero{padding-block:6rem 2.5rem}
  .cs-facts{grid-template-columns:repeat(2,1fr)}
  .cs-section{grid-template-columns:4rem 1fr;gap:1.5rem}
  .cs-more ul{grid-template-columns:1fr 1fr}
}