/* The case-study frame shared by Anubhuti, Clario and Fleet (2026-10-30).
   Every page opens the same way: the result as the headline, then role,
   problem and solution, then three numbers. It closes the same way too, with
   a bottom line. Tokens only (site-system.css, DESIGN-SYSTEM.md §7); each
   page keeps its own accent through --case-accent-readable. */
.cs-top, .cs-bottom, .cs-next {
  --cs-muted: var(--ink-70, var(--muted));
  --cs-accent: var(--case-accent-readable, var(--accent-text));
  box-sizing: border-box; font-family: var(--face-sans);
}
.cs-nw { white-space: nowrap; }
.cs-label {
  margin: 0 0 var(--space-2); font: 400 var(--type-label)/1.4 var(--face-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--cs-muted);
}

/* ---- Top: headline, role / problem / solution, three numbers ---------- */
.cs-top {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--space-8); align-items: start;
  padding-top: var(--page-top); padding-bottom: 0;
}
.cs-top h1 {
  margin: 0 0 var(--space-6); max-width: 21ch;
  font: 600 var(--type-page-title)/1.05 var(--face-display); letter-spacing: -.025em;
  text-wrap: balance;
}
.cs-roles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.cs-roles li {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-pill);
  font-size: var(--type-small); line-height: 1;
}
.cs-ps { display: grid; gap: var(--space-5); margin: 0 0 var(--space-7); }
.cs-ps p:not(.cs-label) { margin: 0; max-width: 52ch; font-size: var(--type-lead); line-height: 1.5; }
.cs-metrics {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule);
}
.cs-metrics li { padding: var(--space-4) var(--space-5) 0 0; }
.cs-metrics li + li { padding-left: var(--space-5); border-left: 1px solid var(--rule); }
.cs-metrics strong {
  display: block; margin-bottom: var(--space-2);
  font: 600 var(--type-stat)/1 var(--face-display); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--cs-accent);
}
.cs-metrics span { display: block; font-size: var(--type-small); line-height: 1.45; color: var(--cs-muted); }
.cs-meta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin: var(--space-6) 0 0; padding: 0; }
.cs-meta dt { font: 400 var(--type-label)/1.4 var(--face-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cs-muted); }
.cs-meta dd { margin: var(--space-1) 0 0; font-size: var(--type-small); line-height: 1.45; }
.cs-top-media { margin: 0; position: sticky; top: calc(var(--site-bar-height) + var(--case-bar-height) + var(--space-5)); }
.cs-top-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); }
.cs-top-media--wide img { aspect-ratio: auto; }
.cs-top-media figcaption { margin-top: var(--space-3); font-size: var(--type-small); line-height: 1.45; color: var(--cs-muted); }

/* ---- Bottom line: everything measured, then what I took from it -------- */
.cs-bottom {
  margin-top: var(--section-y); padding-top: var(--section-y-tight); padding-bottom: 0;
  border-top: 1px solid var(--rule);
}
.cs-bottom h2 { margin: 0 0 var(--space-7); max-width: 24ch; text-wrap: balance; }
.cs-bottom .cs-metrics { row-gap: var(--space-5); }
.cs-bottom .cs-metrics li:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.cs-bottom .cs-metrics li:nth-child(n + 4) { border-top: 1px solid var(--rule); padding-top: var(--space-4); }
.cs-honest { margin: var(--space-5) 0 0; max-width: 72ch; font-size: var(--type-small); line-height: 1.55; color: var(--cs-muted); }
.cs-reflect { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-8); }
.cs-reflect h3 { margin: 0 0 var(--space-2); }
.cs-reflect .cs-since { grid-column: 1 / -1; }
.cs-reflect .cs-since p:not(.cs-label) { max-width: 72ch; }
.cs-reflect p:not(.cs-label) { margin: 0; max-width: 54ch; font-size: var(--type-body); line-height: 1.55; }
.cs-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-7); }
.cs-links a { color: inherit; font-size: var(--type-small); text-underline-offset: var(--space-1); }

@media (max-width: 900px) {
  .cs-top { grid-template-columns: 1fr; gap: var(--space-7); }
  .cs-top-media { position: static; }
  .cs-top-media img { aspect-ratio: 3 / 2; }
  .cs-reflect { grid-template-columns: 1fr; gap: var(--space-7); }
}
/* Phones: one number per row, the number and its words side by side. The
   rows share columns (subgrid), so every number lines up without a fixed width. */
@media (max-width: 760px) {
  .cs-metrics, .cs-bottom .cs-metrics { grid-template-columns: max-content 1fr; column-gap: var(--space-4); row-gap: 0; }
  .cs-metrics li, .cs-metrics li + li, .cs-bottom .cs-metrics li:nth-child(n) {
    display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline;
    padding: var(--space-3) 0; border-left: 0; border-top: 1px solid var(--rule);
  }
  .cs-metrics li:first-child { border-top: 0; }
  .cs-metrics strong { margin: 0; font-size: var(--type-card-title); white-space: nowrap; }
}

/* ---- Next project: label, name, one line ------------------------------- */
/* After the tool pages' pager: the project's name at page-title size and the
   same one-liner its card on the Work page carries. Inside the page edge
   (the nav is a .wrap), never a full-width band. */
.cs-next {
  display: block; margin-top: var(--section-y); padding-top: var(--section-y-tight);
  border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-family: var(--face-sans);
}
.cs-next strong { display: block; font: 600 var(--type-page-title)/1.05 var(--face-display); letter-spacing: -.025em; }
.cs-next-line { display: block; margin-top: var(--space-3); max-width: 60ch; font-size: var(--type-lead); line-height: 1.45; color: var(--cs-muted); }
.cs-next:hover strong { color: var(--accent-text); }
.cs-next:focus-visible { outline: 2px solid var(--accent-text); outline-offset: var(--space-1); border-radius: var(--radius-sm); }

/* ---- How much is left: a line on top of the bottom bar ----------------- */
.cs-progress { position: fixed; left: 0; right: 0; bottom: 0; height: var(--progress-height); z-index: 1000; pointer-events: none; }
.cs-progress i {
  display: block; height: 100%; background: var(--case-accent-readable, var(--accent-text));
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ---- Per page ------------------------------------------------------------
   Anubhuti's chapters have no .wrap, so its frame sits on --edge itself. */
.portfolio-case .cs-top, .portfolio-case .cs-bottom { padding-inline: var(--edge); }
.asset-clearance-case .clario-choice--no { max-width: 60ch; }
/* No made-up tag on a real quote: the producer's words stand on their own. */
.asset-clearance-case .case-quote::before { content: none; }