/* stacked/case-study: the client summary box at the top of a case study
   (7 Oct 2026). Loaded on the site by templates/bof/single.php when the post has
   the block, and in the editor through block.json. Tokens carry fallbacks
   because the editor canvas does not load tokens.css. Scoped under .csb with
   .article-body in front so it beats the prose rules for p, ul and li. */
:is(.ed-single .article-body, .editor-styles-wrapper) .csb {
	margin:8px 0 36px; padding:0;
	/* Outlined, not filled: the intro lead card (filled #EFE9DA, ink top rule)
	   often sits right under this box, and the two must not read as one. */
	background:transparent;
	border:1px solid var(--border, #D8CDB6);
	border-top:2px solid var(--ink, #241F1A);
	font-family:var(--f-body, 'Whyte', Arial, sans-serif);
	color:var(--body-strong, #2B2822);
}
:is(.ed-single .article-body, .editor-styles-wrapper) .csb__head { padding:20px 24px 18px }
:is(.ed-single .article-body, .editor-styles-wrapper) .csb__kicker {
	margin:0; font:700 11px/1.3 var(--f-body, 'Whyte', Arial, sans-serif);
	letter-spacing:.13em; text-transform:uppercase; color:var(--text-2, #6E6456);
}
:is(.ed-single .article-body, .editor-styles-wrapper) .csb__project {
	margin:6px 0 0; font:400 27px/1.15 var(--f-display, 'Gascogne', Georgia, serif);
	letter-spacing:-.01em; color:var(--ink-hard, #1C1A16); text-wrap:balance;
}
:is(.ed-single .article-body, .editor-styles-wrapper) .csb__secs { padding:0 24px 4px }

/* One row per section: label on the left, list on the right, hairline between. */
:is(.ed-single .article-body, .editor-styles-wrapper) .csb__sec {
	display:grid; grid-template-columns:150px minmax(0, 1fr); gap:20px;
	padding:16px 0; border-top:1px solid var(--border, #D8CDB6);
}
:is(.ed-single .article-body, .editor-styles-wrapper) .csb__label {
	margin:3px 0 0; font:700 11.5px/1.45 var(--f-body, 'Whyte', Arial, sans-serif);
	letter-spacing:.1em; text-transform:uppercase; color:var(--ink, #241F1A);
}
:is(.ed-single .article-body, .editor-styles-wrapper) .csb__body > :last-child { margin-bottom:0 }
:is(.ed-single .article-body, .editor-styles-wrapper) .csb__body p {
	margin:0 0 8px; font-size:15.5px; line-height:1.55;
}
:is(.ed-single .article-body, .editor-styles-wrapper) .csb__body ul,
:is(.ed-single .article-body, .editor-styles-wrapper) .csb__body ol { margin:0 0 8px; padding-left:18px }
:is(.ed-single .article-body, .editor-styles-wrapper) .csb__body li {
	margin:0 0 6px; font-size:15.5px; line-height:1.55;
}
:is(.ed-single .article-body, .editor-styles-wrapper) .csb__body li:last-child { margin-bottom:0 }
:is(.ed-single .article-body, .editor-styles-wrapper) .csb__body li::marker { color:var(--text-faint, #8A8172) }

/* A paragraph straight inside the box, after the sections: the small print. */
:is(.ed-single .article-body, .editor-styles-wrapper) .csb__secs > p {
	margin:0; padding:14px 0 16px; border-top:1px solid var(--border, #D8CDB6);
	font-size:13px; line-height:1.55; color:var(--text-2, #6E6456);
}

@media (max-width:600px) {
	:is(.ed-single .article-body, .editor-styles-wrapper) .csb__head { padding:18px 18px 16px }
	:is(.ed-single .article-body, .editor-styles-wrapper) .csb__project { font-size:23px }
	:is(.ed-single .article-body, .editor-styles-wrapper) .csb__secs { padding:0 18px 2px }
	:is(.ed-single .article-body, .editor-styles-wrapper) .csb__sec { grid-template-columns:1fr; gap:8px; padding:14px 0 }
	:is(.ed-single .article-body, .editor-styles-wrapper) .csb__label { margin:0 }
}