/* Case study page */

.cs-hero {
  padding: 180px var(--gutter) 80px;
  background:
    radial-gradient(1000px 500px at 20% 20%, color-mix(in oklch, var(--cyan) 10%, transparent) 0%, transparent 55%),
    var(--ink);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.cs-hero__wrap { max-width: var(--maxw); margin: 0 auto; display: grid; gap: 40px; }
.cs-hero__meta { display: flex; justify-content: space-between; gap: 16px; color: var(--steel-300); }
.cs-hero__meta span:first-child { color: var(--cyan); }
.cs-hero__h1 { font-size: clamp(56px, 9vw, 164px); margin: 0; }
.cs-hero__h1 em { color: var(--cyan); }
.cs-hero__foot { border-top: 1px solid var(--rule); padding-top: 24px; }
.cs-hero__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 0; }
.cs-hero__facts > div { display: grid; gap: 6px; }
.cs-hero__facts dt { color: var(--steel-400); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
.cs-hero__facts dd { margin: 0; color: var(--paper); font-family: var(--ff-display); font-size: 18px; letter-spacing: -0.01em; }
@media (max-width: 900px) { .cs-hero__facts { grid-template-columns: 1fr 1fr; } }

.cs-hero__scroll { position: absolute; right: var(--gutter); bottom: 24px; display: flex; align-items: center; gap: 10px; color: var(--steel-400); font-size: 11px; }
.cs-hero__scroll span { width: 40px; height: 1px; background: var(--rule-strong); display: inline-block; }

.cs-image { padding: 60px 0; background: var(--ink); }
.cs-image__frame { border-radius: 16px; }

.cs-numbers { background: var(--ink); padding: 120px 0; border-top: 1px solid var(--rule); }
.cs-numbers__head { margin-bottom: 64px; max-width: 820px; }
.cs-numbers__h2 { font-size: clamp(40px, 5vw, 88px); margin: 16px 0 0; }
.cs-numbers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.cs-num { padding: 40px 24px 40px 0; border-right: 1px solid var(--rule); display: grid; gap: 16px; align-content: start; }
.cs-num:last-child { border-right: 0; }
.cs-num + .cs-num { padding-left: 24px; }
.cs-num__n { font-size: clamp(64px, 7vw, 128px); color: var(--cyan); letter-spacing: -0.04em; line-height: 1; }
.cs-num__l { font-family: var(--ff-display); font-size: 20px; color: var(--paper); letter-spacing: -0.01em; }
.cs-num__d { color: var(--steel-300); line-height: 1.55; font-size: 14px; }
@media (max-width: 900px) { .cs-numbers__grid { grid-template-columns: 1fr; } .cs-num { border-right: 0; border-bottom: 1px solid var(--rule); padding: 24px 0 !important; } }

/* Brief — editorial, paper */
.cs-brief { background: var(--paper); color: var(--ink); padding: 140px 0; }
.cs-brief__wrap { display: grid; grid-template-columns: 1fr 3fr; gap: 48px; }
.cs-brief__wrap .micro { color: var(--steel-400); }
.cs-brief__lede { font-family: var(--ff-serif); font-size: clamp(32px, 4vw, 60px); line-height: 1.15; color: var(--ink); margin: 0 0 48px; max-width: 22ch; font-style: italic; }
.cs-brief__text { font-size: 18px; line-height: 1.65; color: var(--steel-500); max-width: 62ch; margin: 0 0 20px; }
.cs-brief__text:last-child { color: var(--ink); }
@media (max-width: 900px) { .cs-brief__wrap { grid-template-columns: 1fr; } }

/* Approach */
.cs-approach { background: var(--ink); padding: 140px 0; border-top: 1px solid var(--rule); }
.cs-approach__head { max-width: 820px; margin-bottom: 72px; }
.cs-approach__h2 { font-size: clamp(40px, 5vw, 88px); margin: 16px 0 0; }
.cs-approach__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--rule); }
.cs-approach__cell { padding: 48px 32px 48px 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: grid; gap: 18px; align-content: start; }
.cs-approach__cell:nth-child(2n) { padding-left: 32px; border-right: 0; }
.cs-approach__cell:nth-last-child(-n+2) { border-bottom: 0; }
.cs-approach__k { color: var(--cyan); }
.cs-approach__t { font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.02em; margin: 0; line-height: 1.05; }
.cs-approach__d { color: var(--steel-200); line-height: 1.6; font-size: 16px; margin: 0; max-width: 50ch; }
@media (max-width: 900px) { .cs-approach__grid { grid-template-columns: 1fr; } .cs-approach__cell { border-right: 0; padding: 28px 0 !important; } }

/* Chart */
.cs-chart { background: var(--paper); color: var(--ink); padding: 140px 0; }
.cs-chart__head { max-width: 820px; margin-bottom: 56px; }
.cs-chart__head .micro { color: var(--steel-400); }
.cs-chart__h2 { font-size: clamp(36px, 4.4vw, 72px); margin: 16px 0 12px; }
.cs-chart__sub { color: var(--steel-500); margin: 0; font-size: 16px; }
.cs-chart__frame { position: relative; padding: 24px; border: 1px solid var(--paper-rule); border-radius: 16px; background: color-mix(in oklch, var(--paper) 60%, white); }
.cs-chart__svg { width: 100%; height: 360px; color: var(--ink); }
.cs-chart__axis { display: flex; justify-content: space-between; color: var(--steel-400); padding: 12px 0 0; font-size: 10px; letter-spacing: 0.08em; }
.cs-chart__annot { position: absolute; top: 20px; padding: 4px 10px; border: 1px solid var(--paper-rule); border-radius: 999px; background: var(--paper); color: var(--cyan-ink); font-size: 10px; transform: translateX(-50%); letter-spacing: 0.08em; }
.cs-chart__legend { display: flex; gap: 24px; color: var(--steel-500); font-size: 12px; padding: 16px 0 0; }
.cs-chart__swatch { display: inline-block; width: 20px; height: 2px; margin-right: 8px; vertical-align: middle; }
.cs-chart__swatch--dash { background: repeating-linear-gradient(to right, var(--steel-400) 0 4px, transparent 4px 8px); }
.cs-chart__swatch--solid { background: var(--cyan); }

/* Pull quote */
.cs-pull { background: var(--ink); padding: 140px 0; border-top: 1px solid var(--rule); }
.cs-pull__wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); }
.cs-pull__q { font-size: clamp(32px, 3.6vw, 56px); line-height: 1.2; margin: 24px 0 48px; color: var(--paper); font-style: normal; max-width: 28ch; letter-spacing: -0.01em; }
.cs-pull__by { display: flex; align-items: center; gap: 16px; }
.cs-pull__avatar { background: linear-gradient(135deg, var(--cyan), var(--cyan-2)); color: var(--ink) !important; font-family: var(--ff-display); font-weight: 600; font-size: 18px; border: 0 !important; }
.cs-pull__name { color: var(--paper); font-family: var(--ff-display); font-size: 16px; font-weight: 500; }
.cs-pull__role { color: var(--steel-300); font-size: 13px; }

/* Gallery */
.cs-gallery { background: var(--ink-2); padding: 140px 0; border-top: 1px solid var(--rule); }
.cs-gallery__wrap .micro { margin-bottom: 32px; display: block; }
.cs-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cs-gallery__grid .ph { border-radius: 12px; }
@media (max-width: 900px) { .cs-gallery__grid { grid-template-columns: 1fr 1fr; } .cs-gallery__grid .ph { grid-column: auto !important; } }

/* Next */
.cs-next { background: var(--paper); color: var(--ink); padding: 120px 0; border-top: 1px solid var(--paper-rule); }
.cs-next__wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.cs-next__h2 { font-size: clamp(56px, 7vw, 112px); margin: 12px 0 20px; }
.cs-next__h2 em { color: var(--cyan-ink); }
.cs-next__sub { color: var(--steel-500); font-size: 18px; line-height: 1.55; max-width: 44ch; margin: 0 0 32px; }
.cs-next__thumb { border-radius: 16px; }
.cs-next .btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cs-next .btn--primary:hover { background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
@media (max-width: 900px) { .cs-next__wrap { grid-template-columns: 1fr; } }