/* ==========================================================================
   Grafico — case.css. Case study pages, brand hub and /case-studies/ index
   (docs/rebuild/21 §4-6; Phase 4A). Loaded only on those views; tokens, scenes,
   .btn-primary and .link-secondary come from base.css. One shared stylesheet:
   nothing here is specific to a brand or a case.
   ========================================================================== */
@layer sections {

	.cs [data-scene] { background: var(--scene-bg); color: var(--scene-fg); }
	.cs-wrap { width: var(--container); margin-inline: auto; }
	.media-pic { display: contents; }

	/* ---- type roles ---------------------------------------------------- */
	.cs-h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.025em; line-height: 1.05; }
	.cs-h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
	.cs-eyebrow { font-size: var(--fs-meta); font-weight: 700; letter-spacing: .02em; color: var(--scene-fg-2); }

	/* ---- header --------------------------------------------------------- */
	.cs-head { padding: clamp(40px, 4.4vw, 72px) 0 clamp(56px, 6vw, 104px); }
	.cs-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-meta); color: var(--scene-fg-2); }
	.cs-crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .6; }
	.cs-crumbs a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
	.cs-crumbs a:hover, .cs-crumbs a:focus-visible { text-decoration-thickness: 2px; }
	.cs-crumbs [aria-current] { color: var(--scene-fg); }

	.cs-head__top { margin-top: clamp(36px, 4.6vw, 76px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-24); row-gap: var(--sp-40); align-items: end; }
	.cs-h1 { grid-column: 1 / span 7; font-weight: 700; }
	.cs-h1__brand { display: block; font-size: clamp(3.25rem, min(16vw, calc(80vw / var(--bl, 4)), calc(84rem / var(--bl, 4))), 16rem); letter-spacing: -.055em; line-height: .82; margin-left: -.045em; }
	.cs-h1__brand--index { font-size: clamp(3.5rem, 9vw, 9rem); }
	.cs-h1__title { display: block; margin-top: clamp(20px, 2.4vw, 36px); max-width: 18ch; font-size: clamp(1.75rem, 3.4vw, 3.5rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.06; }

	.cs-head__main { margin-top: clamp(40px, 4.4vw, 72px); max-width: 62ch; }
	.cs-status-note { margin-top: var(--sp-16); max-width: 52ch; font-size: var(--fs-small); line-height: 1.5; color: var(--scene-fg-2); }
	.cs-head__main > .cs-intro:first-child { margin-top: 0; }
	.cs-intro { margin-top: var(--sp-24); max-width: 46ch; font-size: var(--fs-lead); line-height: 1.5; }

	.cs-record { grid-column: 8 / span 5; }
	.cs-record__row { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); column-gap: var(--sp-16); padding: 12px 0; border-top: 1px solid var(--scene-line); }
	.cs-record dt { font-size: var(--fs-meta); color: var(--scene-fg-2); }
	.cs-record dd { font-size: var(--fs-small); font-weight: 700; line-height: 1.45; }
	.cs-record .link-inline { font-weight: 700; }

	/* ---- hero / media --------------------------------------------------- */
	.cs-hero { padding: clamp(40px, 4.4vw, 72px) 0 clamp(48px, 5vw, 88px); }
	.cs-hero__link { margin-top: var(--sp-24); }

	.cs-block + .cs-block { margin-top: clamp(72px, 8vw, 136px); }
	.cs-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-24); }
	.cs-fig { min-width: 0; display: flex; flex-direction: column; }
	.cs-row--full .cs-fig { grid-column: 1 / -1; }
	.cs-row--full.cs-row--s6 .cs-fig { grid-column: 1 / span 6; }
	.cs-row--full.cs-row--s8 .cs-fig { grid-column: 1 / span 8; }
	.cs-row--full.cs-row--s10 .cs-fig { grid-column: 1 / span 10; }
	.cs-row--pair .cs-fig { grid-column: span 6; }
	.cs-row--trio .cs-fig, .cs-row--trio-poster .cs-fig { grid-column: span 4; }
	.cs-row--wide-narrow .cs-fig:first-child, .cs-row--narrow-wide .cs-fig:last-child { grid-column: span 8; }
	.cs-row--wide-narrow .cs-fig:last-child, .cs-row--narrow-wide .cs-fig:first-child { grid-column: span 4; }
	.cs-row--wide-narrow .cs-fig:last-child .cs-frame, .cs-row--narrow-wide .cs-fig:first-child .cs-frame { aspect-ratio: auto; flex: 1; }
	/* phones: real mobile captures, each at its native ratio, as one even row */
	.cs-row--phones { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); width: min(100%, calc(var(--n, 3) * 373px)); margin-inline: auto; column-gap: clamp(20px, 3vw, 48px); }
	.cs-row--phones .cs-fig { grid-column: auto; }

	.cs-frame { position: relative; display: block; overflow: hidden; aspect-ratio: var(--ratio, 16 / 10); background: rgba(128, 128, 128, .12); outline: 1px solid var(--scene-line); outline-offset: -1px; }
	.cs-frame .media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	.cs-frame.is-contain { background: var(--ground, rgba(128, 128, 128, .12)); }
	.cs-frame.is-contain .media-img { object-fit: contain; left: var(--pad, 0%); top: var(--pad, 0%); width: calc(100% - 2 * var(--pad, 0%)); height: calc(100% - 2 * var(--pad, 0%)); inset-block-end: auto; inset-inline-end: auto; }
	.cs-link { display: block; color: inherit; }
	.cs-link:focus-visible { outline: 2px solid var(--scene-focus); outline-offset: 4px; }
	.cs-cap { margin-top: 12px; font-size: var(--fs-meta); line-height: 1.45; color: var(--scene-fg-2); }

	.cs-rowhead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-24); row-gap: var(--sp-12); margin-bottom: var(--sp-32); align-items: baseline; }
	.cs-rowhead .cs-eyebrow { grid-column: 1 / span 3; }
	.cs-rowhead__title { grid-column: 4 / span 7; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
	.cs-rowhead--plain .cs-rowhead__title { grid-column: 1 / span 8; }
	.cs-rowhead--plain .cs-rowhead__text { grid-column: 1 / span 7; }
	.cs-rowhead__text { grid-column: 4 / span 6; max-width: 56ch; font-size: var(--fs-body); line-height: 1.55; color: var(--scene-fg-2); }

	/* ---- narrative + system --------------------------------------------- */
	.cs-story { padding: clamp(72px, 8vw, 128px) 0 clamp(88px, 10vw, 160px); }
	.cs-narr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-24); padding: var(--sp-32) 0 var(--sp-40); border-top: 1px solid var(--scene-line); }
	.cs-narr__label { grid-column: 1 / span 3; font-size: var(--fs-meta); font-weight: 700; letter-spacing: .02em; color: var(--scene-fg-2); }
	.cs-narr__text { grid-column: 4 / span 7; max-width: 38ch; font-size: clamp(1.25rem, 2vw, 1.875rem); font-weight: 500; letter-spacing: -.012em; line-height: 1.3; }

	.cs-system { margin-top: clamp(80px, 9vw, 144px); }
	.cs-system__principles { margin-top: var(--sp-40); display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--sp-32) var(--sp-24); }
	.cs-sys { padding-top: var(--sp-20); border-top: 1px solid var(--scene-line); }
	.cs-sys__label { font-size: var(--fs-body); font-weight: 700; }
	.cs-sys__text { margin-top: 6px; max-width: 34ch; font-size: var(--fs-small); line-height: 1.5; color: var(--scene-fg-2); }
	.cs-sys__hex { margin-left: .6em; font-size: var(--fs-meta); font-weight: 400; letter-spacing: .02em; color: var(--scene-fg-2); font-variant-numeric: tabular-nums; }
	.cs-palette { margin-top: clamp(40px, 4vw, 64px); display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--sp-24); }
	.cs-pal__swatch { display: block; aspect-ratio: 4 / 3; max-height: 220px; width: 100%; margin-bottom: var(--sp-16); outline: 1px solid var(--scene-line); outline-offset: -1px; }
	.cs-system .cs-block { margin-top: clamp(56px, 6vw, 96px); }

	/* ---- built (chapters) ------------------------------------------------ */
	.cs-built { padding: clamp(72px, 8vw, 128px) 0 clamp(88px, 10vw, 160px); }
	.cs-chapter { margin-top: clamp(48px, 5vw, 72px); scroll-margin-top: calc(var(--header-h) + 24px); }
	.cs-chapter__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-24); row-gap: var(--sp-12); padding-top: var(--sp-24); border-top: 1px solid var(--scene-line); margin-bottom: clamp(48px, 5vw, 80px); align-items: baseline; }
	.cs-chapter__title { grid-column: 1 / span 6; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
	.cs-chapter__cats { grid-column: 7 / span 6; font-size: var(--fs-meta); color: var(--scene-fg-2); }
	.cs-chapter__desc { grid-column: 7 / span 6; max-width: 56ch; font-size: var(--fs-body); line-height: 1.55; }

	/* ---- scope / related / services ---------------------------------------- */
	.cs-scope { padding: clamp(72px, 8vw, 120px) 0; }
	.cs-scope__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-24); row-gap: var(--sp-32); }
	.cs-scope__grid .cs-h2 { grid-column: 1 / span 5; }
	.cs-scope__list { grid-column: 6 / span 7; }
	.cs-scope__list li { padding: 18px 0; border-top: 1px solid var(--scene-line); font-size: var(--fs-lead); line-height: 1.4; letter-spacing: -.005em; }
	.cs-scope__list li:last-child { border-bottom: 1px solid var(--scene-line); }

	.cs-related { padding: 0 0 clamp(72px, 8vw, 120px); }
	.cs-related__block + .cs-related__block { margin-top: clamp(56px, 6vw, 96px); }
	.cs-related__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-16); padding-top: var(--sp-32); border-top: 1px solid var(--scene-line); margin-bottom: var(--sp-40); }
	.cs-ccards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-40) var(--sp-24); }
	.cs-ccard__link { display: flex; flex-direction: column; min-width: 0; color: inherit; }
	.cs-ccard__title { margin-top: var(--sp-16); font-size: var(--fs-h4, 1.25rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
	.cs-ccard__brand { margin-top: 4px; font-size: var(--fs-meta); color: var(--scene-fg-2); }
	.cs-ccard__chapters { margin-top: 4px; font-size: var(--fs-small); line-height: 1.45; color: var(--scene-fg-2); }
	.cs-ccard__link:hover .cs-ccard__title, .cs-ccard__link:focus-visible .cs-ccard__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
	.cs-ccard__link:focus-visible { outline: 2px solid var(--scene-focus); outline-offset: 6px; }

	.cs-services { padding: 0 0 clamp(72px, 8vw, 120px); }
	.cs-services .cs-h3 { padding-top: var(--sp-32); border-top: 1px solid var(--scene-line); }
	.cs-services__list { margin-top: var(--sp-24); }
	.cs-services__list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-8) var(--sp-24); padding: 18px 0; border-top: 1px solid var(--scene-line); }
	.cs-services__list li:last-child { border-bottom: 1px solid var(--scene-line); }
	.cs-services__link { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
	.cs-services__link:hover, .cs-services__link:focus-visible { text-decoration-thickness: 2px; }
	.cs-services__line { max-width: 46ch; font-size: var(--fs-small); color: var(--scene-fg-2); }

	/* ---- CTA --------------------------------------------------------------- */
	.cs-cta { padding: clamp(72px, 8vw, 128px) 0; }
	.cs-cta__lead { margin-top: var(--sp-20); max-width: 46ch; font-size: var(--fs-lead); line-height: 1.5; }
	.cs-cta__actions { margin-top: var(--sp-32); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-24) var(--sp-32); }

	/* ---- hub + index -------------------------------------------------------- */
	.cs-hub__grid { margin-top: var(--sp-40); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-40) var(--sp-24); }
	.cs-hub__card a { display: block; }
	.cs-hub__title { display: block; margin-top: var(--sp-16); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
	.cs-hub__chapters { display: block; margin-top: 6px; font-size: var(--fs-meta); line-height: 1.45; color: var(--scene-fg-2); }
	.cs-hub__card a:hover .cs-hub__title, .cs-hub__card a:focus-visible .cs-hub__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
	.cs-hub__card a:focus-visible { outline: 2px solid var(--scene-focus); outline-offset: 6px; }
	.cs-works { padding: clamp(56px, 6vw, 96px) 0 clamp(72px, 8vw, 120px); }
	.cs-works .cs-related__head { margin-top: 0; }
	.cs-works__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-40) var(--sp-24); }
	.cs-work__link { display: flex; flex-direction: column; min-width: 0; color: inherit; }
	.cs-work__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(128, 128, 128, .12); }
	.cs-work__media .media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
	.cs-work__title { margin-top: var(--sp-12); font-size: var(--fs-small); font-weight: 700; line-height: 1.35; }
	a.cs-work__link:hover .cs-work__title, a.cs-work__link:focus-visible .cs-work__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
	a.cs-work__link:focus-visible { outline: 2px solid var(--scene-focus); outline-offset: 6px; }
	.cs-hub__intro { display: block; margin-top: 6px; max-width: 46ch; font-size: var(--fs-small); line-height: 1.5; color: var(--scene-fg-2); }
	.cs-head--index { padding-bottom: clamp(48px, 5vw, 80px); }
	.cs-index { padding: clamp(24px, 3vw, 48px) 0 clamp(56px, 6vw, 96px); }
	.cs-index__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-24); row-gap: var(--sp-24); padding: clamp(32px, 3.4vw, 48px) 0; border-top: 1px solid var(--scene-line); align-items: start; }
	.cs-index__media { grid-column: 1 / span 4; aspect-ratio: 4 / 3; }
	.cs-index__brand { grid-column: 5 / span 4; }
	.cs-index__meta { margin-top: var(--sp-8); font-size: var(--fs-meta); color: var(--scene-fg-2); }
	.cs-index__cases { grid-column: 9 / span 4; }
	.cs-index__cases li + li { margin-top: var(--sp-12); }
	.cs-index__brand .cs-h2 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
	.cs-index__brand .cs-h2 a:hover, .cs-index__brand .cs-h2 a:focus-visible { text-decoration-thickness: 2px; }
	.cs-index__cases a { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
	.cs-index__cases a:hover, .cs-index__cases a:focus-visible { text-decoration-thickness: 2px; }

	/* ---- narrow viewports: technically safe (final mobile art direction is a separate pass) ---------- */
	@media (max-width: 1023px) {
		.cs-h1, .cs-record { grid-column: 1 / -1; }
		.cs-narr__label, .cs-narr__text { grid-column: 1 / -1; }
		.cs-narr__text { margin-top: var(--sp-8); }
		.cs-system__principles, .cs-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); }
				.cs-scope__grid .cs-h2, .cs-scope__list { grid-column: 1 / -1; }
		.cs-rowhead .cs-eyebrow, .cs-rowhead__title, .cs-rowhead__text { grid-column: 1 / -1; }
		.cs-chapter__title, .cs-chapter__cats, .cs-chapter__desc { grid-column: 1 / -1; }
		.cs-index__media, .cs-index__brand, .cs-index__cases { grid-column: 1 / -1; }
		.cs-works__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}
	@media (max-width: 767px) {
		.cs-row--full.cs-row--s6 .cs-fig, .cs-row--full.cs-row--s8 .cs-fig, .cs-row--full.cs-row--s10 .cs-fig, .cs-row--pair .cs-fig, .cs-row--trio .cs-fig, .cs-row--wide-narrow .cs-fig, .cs-row--narrow-wide .cs-fig { grid-column: 1 / -1 !important; }
		.cs-row--wide-narrow .cs-fig .cs-frame, .cs-row--narrow-wide .cs-fig .cs-frame { aspect-ratio: var(--ratio, 16 / 10) !important; flex: none !important; }
		.cs-row--phones { grid-template-columns: minmax(0, 1fr); width: min(100%, 320px); row-gap: var(--sp-32); }
		.cs-system__principles, .cs-palette, .cs-ccards, .cs-hub__grid { grid-template-columns: minmax(0, 1fr); }
		.cs-works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
}