/* ═══════════════════════════════════════════════════════════════════════
   The case studies' staged incidents (src/blog/caseScenes.jsx).
   Self-contained: the static case-study pages and the landing both load it,
   so every value it needs is defined on .cs-scene, not borrowed from either.

   Two rules keep it smooth:
   1. Only transform and opacity ever animate, and only on elements that
      sit over the drawing — never on shapes inside it. The compositor runs
      those without repainting; a shape animated inside an SVG repaints the
      whole SVG on every step.
   2. Every element's resting style is the scene's LAST frame. With the
      animation off (reduced motion) the whole incident is on screen.

   The story runs on one loop per scene, every part on the same duration so
   they can never drift apart. Each plays, holds the verdict for seven
   seconds, clears, and rests a moment before it starts again. The beats,
   in seconds (the keyframes below are these, as percentages):

     boiler, 14s     0.6 report opens · 1.2–2.6 it types · 3.2–4.6 the judge
                     reads the plant · 4.7 marks the contradiction ·
                     5.2–5.7 verdict · hold · 12.7–13.1 the report erases
     trading, 12.8s  0.5–3.5 the order passes the chain, each agent lighting
                     at 0.5 / 1.1 / 1.9 / 2.7 · 2.0–3.3 exposure climbs ·
                     3.6 Syntrox shuts · 4.0–4.5 verdict · hold · 11.5–11.9

   Motion is smooth; only the typing steps, one whole character at a time.
   Stepped motion at a few frames a second reads as lag, not as style.

   Underneath, the plant runs the whole time — burner, steam, lights,
   traffic on the link — on its own short loops.
   ═══════════════════════════════════════════════════════════════════════ */

.cs-scene {
  --cs-blue: #3b82f6;
  --cs-deep: #1d4ed8;
  --cs-sky: #93c5fd;
  --cs-pale: #dbeafe;
  --cs-ink: #f8fafc;
  --cs-dim: #cbd5e1;
  --cs-low: #94a3b8;
  --cs-line: rgb(148 163 184 / 0.16);
  --cs-panel: #050607;   /* the report's ground, solid, so a cover can match it */
  --cs-mono: 'JetBrains Mono', ui-monospace, monospace;

  position: relative; isolation: isolate;
  margin: 0;
  display: grid; gap: 14px;
  /* the drawing's row takes any spare height when a panel stretches the
     scene, so the report and the verdict stay at the foot of the frame */
  grid-template-rows: auto 1fr auto auto;
  padding: 16px clamp(14px, 2vw, 22px) 18px;
  border: 1px solid var(--cs-line);
  background: #000;
  color: var(--cs-dim);
  font-family: var(--cs-mono);
}
/* the landing's ground: a faint square grid, here inside the frame */
.cs-scene::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgb(148 163 184 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(148 163 184 / 0.045) 1px, transparent 1px);
  background-size: 15px 15px;
}
/* registration ticks at the corners, the site's plate mark */
.cs-scene::after {
  content: ''; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid var(--cs-blue); opacity: .45;
  clip-path: polygon(0 0, 10px 0, 10px 1px, 1px 1px, 1px 10px, 0 10px,
                     0 100%, 10px 100%, 10px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 10px), 0 calc(100% - 10px),
                     100% 100%, calc(100% - 10px) 100%, calc(100% - 10px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 10px), 100% calc(100% - 10px),
                     100% 0, calc(100% - 10px) 0, calc(100% - 10px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 10px, 100% 10px);
}

.cs-scene-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 22px;
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--cs-low);
}
.cs-scene-live { display: inline-flex; align-items: center; gap: 9px; }
.cs-scene-live i {
  width: 6px; height: 6px; background: var(--cs-blue);
  box-shadow: 0 0 10px rgb(59 130 246 / .9);
  animation: cs-blink 1.6s steps(1) infinite;
}

/* ── the drawing, and the layers that move over it ───────────────────── */
.cs-stage { position: relative; align-self: center; width: 100%; overflow: hidden; }
.cs-static { display: block; width: 100%; height: 100%; }
.cs-l { position: absolute; display: block; overflow: visible; }
.cs-scene svg text { font-family: var(--cs-mono); font-size: 10px; letter-spacing: .04em; }
.t-ink { fill: var(--cs-ink); }
.t-low { fill: var(--cs-low); }
.t-sky { fill: var(--cs-sky); }
.t-blue { fill: var(--cs-blue); }

.q-field { fill: var(--cs-low); opacity: .16; }
.q-dim { fill: var(--cs-low); opacity: .42; }
.q-blue { fill: var(--cs-blue); }
.q-link { fill: var(--cs-blue); opacity: .38; }
.q-water { fill: var(--cs-deep); opacity: .55; }
.q-surface { fill: var(--cs-blue); opacity: .85; }
.q-win { fill: var(--cs-pale); opacity: .9; }
.q-win--off { fill: var(--cs-low); opacity: .3; }
.q-led { fill: var(--cs-sky); }
.q-led--blue { fill: var(--cs-blue); }
.q-led--dim { fill: var(--cs-low); opacity: .3; }
.q-pkt { fill: var(--cs-pale); }
.q-flame { fill: var(--cs-sky); }
.q-flame--pale { fill: var(--cs-pale); }
.q-steam { fill: var(--cs-low); }
.cs-mark { fill: none; stroke: var(--cs-pale); stroke-width: 1; stroke-dasharray: 4 3; }

/* the plant, running: short loops of their own */
.cs-flame, .cs-steam, .cs-led, .cs-pkt-out, .cs-pkt-back, .cs-dots i, .cs-scene-live i { will-change: opacity, transform; }
.cs-flame { animation: cs-flicker .9s steps(1) infinite; }
.cs-flame--b { animation-delay: -.45s; }
.cs-steam { opacity: 0; animation: cs-rise 2.4s linear infinite; }
.cs-steam--1 { animation-delay: -.8s; }
.cs-steam--2 { animation-delay: -1.6s; }
.cs-led { animation: cs-blink 1.1s steps(1) infinite; }
.cs-led--b { animation-duration: 1.7s; animation-delay: -.5s; }
/* each packet crosses the link: 70 units of an 80-unit layer */
.cs-pkt-out { animation: cs-out 1.4s linear infinite; }
.cs-pkt-back { animation: cs-back 1.4s linear -.7s infinite; }

@keyframes cs-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
@keyframes cs-flicker { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .3; } }
@keyframes cs-rise { from { transform: translateY(0); opacity: .7; } to { transform: translateY(-75%); opacity: 0; } }
@keyframes cs-out { from { transform: translateX(0); } to { transform: translateX(87.5%); } }
@keyframes cs-back { from { transform: translateX(0); } to { transform: translateX(-87.5%); } }

/* ── the report ──────────────────────────────────────────────────────── */
.cs-term {
  padding: 12px 14px;
  border: 1px solid var(--cs-line);
  background: var(--cs-panel);
}
.cs-term-h {
  display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px;
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--cs-low);
}
.cs-term-l { margin: 0; padding: 3px 0; overflow: hidden; font-size: clamp(12px, 1.25vw, 14px); color: var(--cs-ink); white-space: nowrap; }
.cs-term-l::before { content: '› '; color: var(--cs-blue); }
/* typed by uncovering: a block the colour of the report, exactly as wide
   as the text, slides right one character at a time */
.cs-type { position: relative; display: inline-block; width: calc(var(--n) * 1ch); vertical-align: bottom; }
.cs-type::after {
  content: ''; position: absolute; top: -3px; bottom: -3px; left: 0; width: 100%;
  background: var(--cs-panel);
  transform: translateX(100%);
}
/* what the report got wrong, marked once the judge has read the plant */
.cs-flag { position: relative; font-weight: 500; color: var(--cs-pale); }
.cs-flag::before {
  content: ''; position: absolute; inset: -2px -4px; z-index: 1;
  border: 1px solid var(--cs-pale); background: rgb(219 234 254 / .12);
}

/* ── the trading floor ───────────────────────────────────────────────── */
.cs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1px; background: var(--cs-line); border: 1px solid var(--cs-line); }
.cs-split > * { background: #000; padding: 12px 14px; }
.cs-ticket { margin: 0; display: grid; gap: 7px; align-content: start; }
.cs-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; }
.cs-row dt { color: var(--cs-low); }
.cs-row dd { margin: 0; color: var(--cs-sky); }

.cs-meter-h { margin: 0 0 22px; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--cs-low); }
.cs-meter-track { position: relative; height: 10px; }
.cs-meter-clip { position: absolute; inset: 0; overflow: hidden; background: #121416; }
/* the fill runs past the ceiling, and the part past it is the brightest */
.cs-meter-fill {
  position: absolute; inset: 0 auto 0 0; width: 94%;
  background: linear-gradient(90deg, var(--cs-blue) 0 74.5%, var(--cs-pale) 74.5% 100%);
}
.cs-meter-cover { position: absolute; inset: 0; background: #121416; transform: translateX(100%); }
.cs-meter-cap {
  position: absolute; left: 70%; top: -6px; bottom: -6px; width: 0;
  border-left: 1px dashed var(--cs-ink);
}
.cs-meter-cap span {
  position: absolute; bottom: calc(100% + 3px); left: 0; transform: translateX(-50%);
  font: 400 10px/1 var(--cs-mono); color: var(--cs-ink); white-space: nowrap;
}

/* ── the verdict, uncovered in eight steps: the site's stepped wipe ──── */
.cs-verdict {
  position: relative;
  padding: 13px 15px 12px;
  border: 1px solid var(--cs-pale);
  background:
    repeating-linear-gradient(90deg, rgb(219 234 254 / .06) 0 4px, transparent 4px 5px),
    #000;
}
.cs-verdict::after {
  content: ''; position: absolute; inset: -2px; background: #000;
  transform-origin: 100% 50%; transform: scaleX(0);
}
.cs-verdict-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 7px;
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--cs-sky);
}
.cs-verdict-h strong {
  padding: 3px 8px; background: var(--cs-pale); color: #000;
  font-weight: 500; letter-spacing: .13em;
}
.cs-verdict-l {
  margin: 0; font: 500 clamp(13px, 1.3vw, 15px)/1.45 'Space Grotesk', system-ui, sans-serif;
  letter-spacing: -.005em; color: var(--cs-ink);
}
.cs-verdict-f {
  margin: 9px 0 0; padding-top: 9px; border-top: 1px solid var(--cs-line);
  font-size: 10.5px; letter-spacing: .06em; color: var(--cs-low);
}
.cs-others { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cs-dots { display: inline-flex; gap: 4px; }
.cs-dots i { width: 6px; height: 6px; background: var(--cs-blue); animation: cs-blink 1.3s steps(1) infinite; }
.cs-dots i:nth-child(3n) { animation-delay: -.4s; }
.cs-dots i:nth-child(3n + 1) { animation-delay: -.9s; animation-duration: 1.7s; }
.cs-sky { color: var(--cs-sky); }

/* ── the story's loop: boiler, 14s ───────────────────────────────────── */
.cs-b-head { animation: cs-b-head 14s linear infinite; }
/* one character per step: the cover is exactly the text's width (--n ch,
   in a monospace face) and moves on by 1ch each step */
.cs-b-type::after { animation: cs-b-type 14s steps(31) infinite; }
.cs-b-mark, .cs-b-type .cs-flag::before { animation: cs-b-mark 14s linear infinite; }
.cs-b-verdict::after { animation: cs-b-verdict 14s linear infinite; }
.cs-sweep { position: absolute; inset: 0; pointer-events: none; opacity: 0; will-change: transform, opacity; animation: cs-b-sweep 14s linear infinite; }
.cs-sweep i { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--cs-sky); box-shadow: 0 0 12px rgb(147 197 253 / .8); }

@keyframes cs-b-head {
  0%, 4.286% { opacity: 0; }
  5.357%, 90.714% { opacity: 1; }
  93.571%, 100% { opacity: 0; }
}
@keyframes cs-b-type {
  0%, 8.571% { transform: translateX(0); }
  18.571%, 90.714% { transform: translateX(100%); }
  93.571%, 100% { transform: translateX(0); }
}
@keyframes cs-b-sweep {
  0%, 22.857% { transform: translateX(0); opacity: 0; }
  23.214% { transform: translateX(1%); opacity: 1; }
  32.5% { transform: translateX(99%); opacity: 1; }
  32.857%, 100% { transform: translateX(100%); opacity: 0; }
}
@keyframes cs-b-mark {
  0%, 33.571% { opacity: 0; }
  34.643%, 90.714% { opacity: 1; }
  93.571%, 100% { opacity: 0; }
}
@keyframes cs-b-verdict {
  0% { transform: scaleX(1); }
  37.143% { transform: scaleX(1); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  40.714% { transform: scaleX(0); }
  90.714% { transform: scaleX(0); animation-timing-function: cubic-bezier(.55, 0, .7, .2); }
  93.571%, 100% { transform: scaleX(1); }
}

/* ── the story's loop: trading, 12.8s ─────────────────────────────────── */
.cs-t-a0 { animation: cs-t-a0 12.8s linear infinite; }
.cs-t-a1 { animation: cs-t-a1 12.8s linear infinite; }
.cs-t-a2 { animation: cs-t-a2 12.8s linear infinite; }
.cs-t-a3 { animation: cs-t-a3 12.8s linear infinite; }
.cs-t-r0 { animation: cs-t-r0 12.8s linear infinite; }
.cs-t-r1 { animation: cs-t-r1 12.8s linear infinite; }
.cs-t-r2 { animation: cs-t-r2 12.8s linear infinite; }
.cs-t-gate { animation: cs-t-gate 12.8s linear infinite; }
.cs-t-pkt { transform: translateX(92.6%); animation: cs-t-pkt 12.8s linear infinite; }
.cs-t-meter { animation: cs-t-meter 12.8s linear infinite; }
.cs-t-verdict::after { animation: cs-t-verdict 12.8s linear infinite; }
.cs-t-a0, .cs-t-a1, .cs-t-a2, .cs-t-a3, .cs-t-pkt, .cs-t-gate { will-change: opacity, transform; }

@keyframes cs-t-a0 {
  0%, 3.906% { opacity: 0; }
  5.078%, 89.844% { opacity: 1; }
  92.969%, 100% { opacity: 0; }
}
@keyframes cs-t-a1 {
  0%, 8.594% { opacity: 0; }
  9.766%, 89.844% { opacity: 1; }
  92.969%, 100% { opacity: 0; }
}
@keyframes cs-t-a2 {
  0%, 14.844% { opacity: 0; }
  16.016%, 89.844% { opacity: 1; }
  92.969%, 100% { opacity: 0; }
}
@keyframes cs-t-a3 {
  0%, 21.094% { opacity: 0; }
  22.266%, 89.844% { opacity: 1; }
  92.969%, 100% { opacity: 0; }
}
@keyframes cs-t-r0 {
  0%, 10.156% { opacity: 0; }
  11.328%, 89.844% { opacity: 1; }
  92.969%, 100% { opacity: 0; }
}
@keyframes cs-t-r1 {
  0%, 16.406% { opacity: 0; }
  17.578%, 89.844% { opacity: 1; }
  92.969%, 100% { opacity: 0; }
}
@keyframes cs-t-r2 {
  0%, 22.656% { opacity: 0; }
  23.828%, 89.844% { opacity: 1; }
  92.969%, 100% { opacity: 0; }
}
@keyframes cs-t-gate {
  0%, 28.125% { opacity: 0; }
  29.297%, 89.844% { opacity: 1; }
  92.969%, 100% { opacity: 0; }
}
@keyframes cs-t-pkt {
  0%, 3.906% { transform: translateX(0); opacity: 1; }
  27.344%, 89.844% { transform: translateX(92.6%); opacity: 1; }
  92.969% { transform: translateX(92.6%); opacity: 0; }
  100% { transform: translateX(0); opacity: 0; }
}
@keyframes cs-t-meter {
  0% { transform: translateX(0); }
  15.625% { transform: translateX(0); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  25.781% { transform: translateX(100%); }
  89.844% { transform: translateX(100%); animation-timing-function: cubic-bezier(.55, 0, .7, .2); }
  92.969%, 100% { transform: translateX(0); }
}
@keyframes cs-t-verdict {
  0% { transform: scaleX(1); }
  31.25% { transform: scaleX(1); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  35.156% { transform: scaleX(0); }
  89.844% { transform: scaleX(0); animation-timing-function: cubic-bezier(.55, 0, .7, .2); }
  92.969%, 100% { transform: scaleX(1); }
}

/* the last frame, held, for anyone who has asked for less motion */
@media (prefers-reduced-motion: reduce) {
  .cs-scene *, .cs-scene *::before, .cs-scene *::after { animation: none !important; }
  .cs-steam, .cs-sweep { opacity: 0; }
}

@media (max-width: 520px) {
  .cs-split { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   /case-studies — on top of blog.css, in its language: black, one hue,
   square corners, hairline plates, Space Grotesk set tight, mono labels.

   These go to design partners, so the page is built to be read across a
   table: the incident staged in the hero (scenes.css), the story as
   numbered chapters whose heading waits in a rail beside the text, the
   case's own sentence set large where the failure is told, and the pilot as
   a closing plate on the case's own art.
   ═══════════════════════════════════════════════════════════════════════ */

.cs-n { color: var(--blue); }

/* ── the hero: the case on the left, the incident on the right ───────── */
.cs-hero {
  position: relative; isolation: isolate;
  max-width: var(--wide); margin: 0 auto;
  padding: clamp(28px, 4.4vw, 60px) var(--gutter) clamp(40px, 5vw, 72px);
  display: grid; gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 1080px) {
  .cs-hero { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .cs-hero-stage { position: sticky; top: 24px; }
}
.cs-hero--art { grid-template-columns: minmax(0, 1fr); }
.cs-hero--art .cs-hero-text { max-width: 68ch; }
.cs-hero-text { display: grid; gap: 18px; align-content: start; min-width: 0; }
.cs-hero-text .b-eyebrow { margin: 0; justify-self: start; }
.cs-h {
  margin: 0;
  font: 500 clamp(2.15rem, 4.2vw, 3.5rem)/1.02 var(--display);
  letter-spacing: -0.038em; color: var(--ink);
  text-wrap: balance;
}
.cs-h span { color: var(--ink-low); }
.cs-lede {
  margin: 4px 0 0; max-width: 46ch;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.58; color: var(--ink-dim);
}

/* the facts, and the way in: a plate of its own beside the title */
.cs-seal {
  margin: 10px 0 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.cs-seal > div { background: var(--void); padding: 14px 18px; }
.cs-seal dt {
  margin: 0 0 6px;
  font: 500 10px/1.4 var(--mono);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-low);
}
.cs-seal dd { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink-dim); }
.cs-seal { grid-template-columns: minmax(0, 1fr) auto; }
/* the way in, beside the facts: anyone who wants to know more asks */
.cs-seal-ask { position: relative; display: grid; gap: 4px; align-content: center; }
.cs-seal-ask::before {
  content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px;
  background: var(--blue); box-shadow: 0 0 12px rgb(59 130 246 / .6);
}
.cs-seal-ask dt { color: var(--blue); }
.cs-seal-ask .b-btn { justify-self: start; }
@media (max-width: 520px) { .cs-seal { grid-template-columns: minmax(0, 1fr); } }

/* ── the chapters ────────────────────────────────────────────────────
   Each chapter: its number and heading held in a rail on the left while
   its text scrolls past on the right. The text column keeps the blog's
   measure, so the reading is the same as an article's. */
.cs-lead { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }
.cs-chapters {
  max-width: var(--wide); margin: 0 auto;
  padding: 0 var(--gutter);
}
.cs-ch {
  position: relative;
  display: grid; gap: 18px 48px;
  padding: clamp(40px, 5vw, 72px) 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 1000px) {
  .cs-ch { grid-template-columns: minmax(0, 300px) minmax(0, var(--measure)); }
  .cs-ch-h { position: sticky; top: 28px; align-self: start; }
}
.cs-ch-h { display: grid; gap: 14px; align-content: start; }
.cs-ch-n {
  font: 400 12px/1 var(--mono); letter-spacing: .14em; color: var(--blue);
  display: inline-flex; align-items: center; gap: 10px;
}
.cs-ch-n::after {
  content: ''; width: 44px; height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--blue) 0 4px, transparent 4px 5px);
}
.cs-ch-h h2 {
  margin: 0;
  font: 500 clamp(1.5rem, 2.3vw, 1.95rem)/1.1 var(--display);
  letter-spacing: -0.028em; color: var(--ink);
  text-wrap: balance;
}
.cs-ch-body > :first-child { margin-top: 0; }
.cs-ch-body > :last-child { margin-bottom: 0; }

/* ── why the usual controls let it through ───────────────────────────
   The list becomes the failure's path: a dashed line runs down through
   every control, and at each one the gate stands open and the packet
   goes through. */
.cs-ch--gates ul {
  position: relative; list-style: none; padding: 0; margin: 0 0 1.6em;
  display: grid; gap: 0;
}
.cs-ch--gates ul::before {
  content: ''; position: absolute; left: 21px; top: 6px; bottom: 6px; width: 2px;
  background-image: repeating-linear-gradient(180deg, rgb(219 234 254 / .55) 0 4px, transparent 4px 9px);
}
.cs-ch--gates li {
  position: relative; margin: 0; padding: 4px 0 22px 66px;
}
.cs-ch--gates li:last-child { padding-bottom: 4px; }
.cs-ch--gates li::marker { content: none; }
.cs-ch--gates li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 44px; height: 44px;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg fill='%2394a3b8'%3E%3Crect x='1' y='19' width='6' height='6'/%3E%3Crect x='9' y='19' width='6' height='6'/%3E%3Crect x='29' y='19' width='6' height='6'/%3E%3Crect x='37' y='19' width='6' height='6'/%3E%3C/g%3E%3Crect x='19' y='19' width='6' height='6' fill='%23dbeafe'/%3E%3C/svg%3E") center / 44px 44px no-repeat;
}
.cs-ch--gates li > strong:first-child { color: var(--ink); }
.cs-ch--gates .cs-li-lead > strong:first-child {
  display: block; margin-bottom: 4px;
  font: 500 1.12rem/1.3 var(--display); letter-spacing: -0.012em;
}

/* ── what Syntrox did: four plates on the hairline grid ──────────────── */
.cs-ch--does ul {
  list-style: none; padding: 0; margin: 1.4em 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  background: var(--line); border: 1px solid var(--line);
}
.cs-ch--does li {
  position: relative; margin: 0; padding: 20px 20px 22px;
  background: var(--void); font-size: 0.97rem; line-height: 1.6;
}
.cs-ch--does li::marker { content: none; }
.cs-ch--does li::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--blue) 0 4px, transparent 4px 5px);
  opacity: .7;
}
.cs-ch--does .cs-li-lead > strong:first-child {
  display: block; margin-bottom: 8px;
  font: 500 1.08rem/1.3 var(--display); letter-spacing: -0.012em;
}
/* the plates want more width than the measure, so this chapter breaks the
   rail: heading on top, the plates across the full width under it */
@media (min-width: 1000px) {
  .cs-ch.cs-ch--does { grid-template-columns: minmax(0, 1fr); }
  .cs-ch--does .cs-ch-h { position: static; grid-template-columns: auto 1fr; align-items: center; gap: 18px; }
  .cs-ch--does .cs-ch-body > :not(ul) { max-width: var(--measure); margin-left: calc(300px + 48px); }
}

/* ── the sentence, set large ─────────────────────────────────────────── */
.cs-quote {
  margin: 0; padding: clamp(48px, 7vw, 104px) 0;
  border-top: 1px solid var(--line);
}
.cs-quote::before {
  content: ''; display: block; width: 88px; height: 3px; margin-bottom: 30px;
  background-image: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 8px);
}
.cs-quote p {
  margin: 0; max-width: 18ch;
  font: 500 clamp(2.4rem, 6.4vw, 5.6rem)/0.98 var(--display);
  letter-spacing: -0.045em; color: var(--ink);
  text-wrap: balance;
}
.cs-quote p span { display: block; color: var(--ink-low); }

/* ── the customer's words ────────────────────────────────────────────
   Not the pull quote (that is the page's own sentence, repeated): these
   are words we did not write, so they get a plate of their own, a quote
   mark in the one hue, and the attribution in the label voice. */
.cs-say {
  position: relative; isolation: isolate; overflow: hidden;
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: clamp(32px, 4.6vw, 64px) clamp(28px, 4.6vw, 64px) clamp(28px, 3.6vw, 44px);
  border: 1px solid var(--line-strong);
}
.cs-say .bc-art {
  --aw: 1100px; --mx: 90px; --my: 140px;
  inset: 0; height: auto; opacity: .55;
  -webkit-mask-image: none; mask-image: none;
}
.cs-say .bc-scrim { background: linear-gradient(100deg, #000 0%, rgb(0 0 0 / .95) 55%, rgb(0 0 0 / .7) 100%); }
.cs-say::before {
  content: '\201C';
  display: block; height: .5em; margin: 0 0 6px -.04em;
  font: 500 clamp(5rem, 9vw, 8rem)/1 var(--display); color: var(--blue);
}
.cs-say blockquote { margin: 0; }
.cs-say blockquote p {
  margin: 0; max-width: 30ch;
  font: 500 clamp(1.55rem, 2.9vw, 2.45rem)/1.18 var(--display);
  letter-spacing: -0.028em; color: var(--ink);
  text-wrap: pretty;
}
.cs-say figcaption {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(22px, 2.6vw, 32px); padding-top: 16px;
  border-top: 1px solid var(--line);
  font: 500 11px/1.4 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-low);
}
.cs-say figcaption::before {
  content: ''; width: 6px; height: 6px; flex: none;
  background: var(--blue); box-shadow: 0 0 10px rgb(59 130 246 / .8);
}

/* ── the pilot: the closing plate, on the case's own art ─────────────── */
.cs-ch--pilot {
  isolation: isolate; overflow: hidden;
  margin: clamp(24px, 3vw, 40px) 0 clamp(64px, 8vw, 112px);
  padding: clamp(32px, 4.4vw, 56px);
  border: 1px solid rgb(59 130 246 / .35);
}
@media (min-width: 1000px) {
  .cs-ch.cs-ch--pilot { grid-template-columns: minmax(0, 244px) minmax(0, var(--measure)); }
}
.cs-ch--pilot .bc-art {
  --aw: 1200px; --mx: 120px; --my: 120px;
  inset: 0; height: auto; opacity: .7;
  -webkit-mask-image: none; mask-image: none;
}
.cs-ch--pilot .bc-scrim {
  background: linear-gradient(100deg, #000 0%, rgb(0 0 0 / .94) 45%, rgb(0 0 0 / .62) 100%);
}
.cs-go { margin: 1.8em 0 0; }
/* the body's link colour would otherwise win over the button's own */
.bp-body .cs-go .b-btn--solid { color: #000; text-decoration: none; }
.bp-body .cs-go .b-btn--solid:hover { color: #fff; }

/* the measures, as an instrument's readout: what is measured, loud, and
   why it matters, quiet */
.cs-table { margin: 1.4em 0 0; }
.cs-table table { width: 100%; border-collapse: collapse; }
.cs-table th {
  padding: 0 0 10px; text-align: left;
  font: 500 10px/1.4 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-low);
  border-bottom: 1px solid var(--line-strong);
}
.cs-table td { padding: 14px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.cs-table td:first-child {
  width: 56%; padding-right: 24px;
  font: 500 1rem/1.4 var(--display); letter-spacing: -0.01em; color: var(--ink);
}
.cs-table td:last-child { font-size: 0.93rem; color: var(--ink-dim); }
.cs-table tbody tr { counter-increment: measure; }
.cs-table td:first-child::before {
  content: counter(measure, decimal-leading-zero);
  display: inline-block; width: 2.4em;
  font: 400 11px/1 var(--mono); color: var(--blue); vertical-align: 2px;
}
@media (max-width: 640px) {
  .cs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cs-table tr, .cs-table td { display: block; }
  .cs-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .cs-table td { padding: 2px 0; border: 0; width: auto !important; }
  .cs-table td:last-child { padding-left: 2.4em; }
}

/* ── the panels: /case-studies, and "the other case study" ───────────── */
.cs-ix-hero { padding-bottom: clamp(32px, 4vw, 52px); }
.cs-diptych {
  max-width: var(--wide); margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid; gap: 16px;
}
/* Side by side, the two panels share their rows (subgrid): the incidents
   get one height, so both panels' copy starts on the same line and their
   links sit level, whichever drawing is taller. */
@media (min-width: 960px) {
  .cs-diptych { grid-template-columns: 1fr 1fr; }
  .cs-diptych:not(.cs-diptych--one) .cs-panel { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}
.cs-diptych--one { grid-template-columns: 1fr; }

.cs-panel {
  position: relative; isolation: isolate;
  display: grid; align-content: start;
  border: 1px solid var(--line);
  background: var(--void);
  color: var(--ink); text-decoration: none;
  transition: border-color .3s var(--e-out);
}
.cs-panel::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background-image: repeating-linear-gradient(90deg, var(--blue) 0 4px, transparent 4px 5px);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--e-out);
}
.cs-panel:hover, .cs-panel:focus-visible { border-color: rgb(59 130 246 / .5); }
.cs-panel:hover::after, .cs-panel:focus-visible::after { transform: scaleX(1); }
.cs-panel:hover .bc-ticks, .cs-panel:focus-visible .bc-ticks { opacity: .55; inset: 5px; }
.cs-panel:hover .bc-go .b-arrow { transform: translateX(4px); }
.cs-panel:hover .bc-go { color: var(--sky); }
.cs-panel .bc-ticks { z-index: 2; }

.cs-panel-stage { display: flex; padding: clamp(14px, 2vw, 22px) clamp(14px, 2vw, 22px) 0; }
.cs-panel-stage .cs-scene { flex: 1; pointer-events: none; }
.cs-panel-art {
  display: block; height: 240px;
  background: var(--art) var(--fx, 70%) var(--fy, 50%) / cover no-repeat;
  opacity: .8;
}
.cs-panel-text {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.6vw, 32px) clamp(22px, 2.6vw, 30px);
}
.cs-moves {
  margin: 0;
  font: 500 clamp(1.9rem, 3vw, 2.6rem)/1 var(--display);
  letter-spacing: -0.04em; color: var(--ink);
}
.cs-panel-h {
  margin: 0;
  font: 500 1.3rem/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink-dim);
  text-wrap: balance;
}
.cs-panel-x { margin: 0; color: var(--ink-dim); font-size: 0.97rem; line-height: 1.6; max-width: 60ch; }
.cs-panel .bc-go { margin-top: auto; padding-top: 6px; }

/* one panel on its own: the incident beside the copy, not over it */
@media (min-width: 960px) {
  .cs-panel--wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
  .cs-panel--wide .cs-panel-stage { padding-bottom: clamp(14px, 2vw, 22px); }
}

.cs-more {
  max-width: var(--wide); margin: 0 auto;
  padding: 0 0 clamp(72px, 8vw, 120px);
}
.cs-more > .b-eyebrow { margin: 0 var(--gutter) 22px; }

@media (max-width: 560px) {
  .cs-ch--gates li { padding-left: 56px; }
  .cs-ch--gates li::before { width: 40px; height: 40px; background-size: 40px 40px; }
  .cs-ch--gates ul::before { left: 19px; }
}