/* case-cards.css -- the case studies' card grids, off Tailwind.

   The warm cards each case study shows its working in: a title, the
   artifact, and what it was for. On SAP they sit as a bento, one tall card
   beside a stack of two, mirrored on the next step; a single card carries a
   wide picture. Until 2026-10-30 they were Tailwind utilities in the
   markup. When the SAP case study moved onto the write-up template (#934)
   they were replaced by the articles' rail, and the owner asked for the
   cards back exactly as they were, so this file is those utilities
   translated one for one into named rules, in the same tokens
   (tailwind.config.js read every spacing, size and color from them).

   The one value that is not a straight translation is the artifacts'
   shadow. Tailwind's shadow-sm was 0 1px 2px at 5%, a number of its own;
   it is --shadow-card here, the token for a thing resting on a surface.

   The grid takes the page's full width from 1024px, as the rails and the
   wide flows do, because the cards were 1216px across at 1440 and a
   bento at the 832px figure width would crush the split inside each
   card. */

.cc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  margin: var(--space-2xl) 0 var(--space-3xl);
}
@media (min-width: 768px) {
  .cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
@media (min-width: 1024px) {
  .container.case-narrow > .cc-grid,
  .container.case-narrow > .cc-card { width: var(--col-full); max-width: var(--col-full); }
}

/* The stack beside the tall card: two cards sharing its height. */
.cc-stack { display: flex; flex-direction: column; gap: var(--space-xl); }
@media (min-width: 768px) {
  .cc-stack { height: 100%; }
  .cc-stack > .cc-card { flex: 1; }
}

.cc-card {
  padding: var(--space-md);
  background: var(--color-warm);
  border: 1px solid var(--rule-card);
  border-radius: var(--radius-xl);
}
@media (min-width: 768px) {
  .cc-card { padding: var(--space-3xl); }
  .cc-grid > .cc-card { height: 100%; }
}
.container.case-narrow > .cc-card { margin: var(--space-2xl) 0 var(--space-3xl); }

:is(.build-chapter, .ds-demo) .cc-title {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
  color: var(--color-charcoal);
}

/* The artifact and its notes: 45 to 55, the notes centered beside it. */
.cc-split {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: var(--space-sm);
}
@media (min-width: 768px) { .cc-split { gap: var(--space-md); } }
.cc-split + * { margin-top: var(--space-md); }

.cc-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  box-shadow: var(--shadow-card);
}
.cc-img-tall { height: 100%; }

.cc-body { display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 768px) { .cc-body { padding-left: var(--space-xs); } }

:is(.build-chapter, .ds-demo) .cc-label {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  color: var(--color-charcoal);
}
:is(.build-chapter, .ds-demo) .cc-list {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding-left: var(--space-lg);
  list-style: disc;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-charcoal);
}
:is(.build-chapter, .ds-demo) .cc-list li { margin: 0; padding: 0; }
:is(.build-chapter, .ds-demo) .cc-list li::before { content: none; }
@media (min-width: 1024px) {
  :is(.build-chapter, .ds-demo) .cc-label,
  :is(.build-chapter, .ds-demo) .cc-list { font-size: var(--text-base); }
}

/* The step headings over the cards carry their number in a sage disc, as
   they did on Tailwind: 40px, the numeral in white at --text-xl (5.82:1 on
   the sage, COLOR.md section 2). A step that follows a step's cards opens
   at --space-block, the room the old step blocks kept between them. */
:is(.build-chapter, .ds-demo) .cc-step {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.cc-step-n {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-accent-text);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: 1;
}
.container.case-narrow > :is(.cc-grid, .cc-card, .dp-note) + h3 { margin-top: var(--space-block); }

/* ---------- Variants, one per page family, each as it was ---------- */

/* USDA: two up with more air, each card a picture over its notes. */
.cc-grid--loose { gap: var(--space-2xl); margin-bottom: var(--space-4xl); }
.cc-card--flush { padding: 0; overflow: hidden; }
.cc-card-head { padding: var(--space-xl) var(--space-xl) var(--space-2xs); }
.cc-card-foot { padding: var(--space-xs) var(--space-xl) var(--space-xl); }
@media (min-width: 768px) {
  .cc-card--flush { padding: 0; }
  .cc-card-head { padding: var(--space-3xl) var(--space-3xl) var(--space-2xs); }
  .cc-card-foot { padding: var(--space-xs) var(--space-3xl) var(--space-3xl); }
}
.cc-notes { margin-bottom: var(--space-sm); }

/* The career pages: one card a project, a framed screen over its notes. */
.cc-column { display: grid; gap: var(--space-4xl); margin: var(--space-2xl) 0 var(--space-3xl); }
@media (min-width: 1024px) {
  .container.case-narrow > .cc-column,
  .container.case-narrow > .cc-panel { width: var(--col-full); max-width: var(--col-full); }
}
.cc-card--roomy { padding: var(--space-xl); }
@media (min-width: 768px) { .cc-card--roomy { padding: var(--space-3xl); } }
.cc-figure { margin-bottom: var(--space-md); }
.cc-figure--loose { margin-bottom: var(--space-2xl); }
@media (min-width: 768px) { .cc-notes--indent { padding-left: var(--space-xs); } }

:is(.build-chapter, .ds-demo) .cc-title--lg { font-size: var(--text-lg); }
@media (min-width: 768px) { :is(.build-chapter, .ds-demo) .cc-title--lg { font-size: var(--text-xl); } }
:is(.build-chapter, .ds-demo) .cc-title--snug { margin-bottom: var(--space-2xs); }
:is(.build-chapter, .ds-demo) .cc-title--loose { margin-bottom: var(--space-xl); }

.cc-img--flat { box-shadow: none; }
.cc-img--raised { box-shadow: var(--shadow-card-raised); }
.cc-img--framed { border-radius: 12px; background: var(--color-white); }

:is(.build-chapter, .ds-demo) .cc-label--base,
:is(.build-chapter, .ds-demo) .cc-list--base { font-size: var(--text-base); }
:is(.build-chapter, .ds-demo) .cc-list--loose { gap: var(--space-xs); }

/* The field label the old pages called .case-field-label: the Kicker. */
:is(.build-chapter, .ds-demo) .cc-kicker {
  font-family: var(--font-sans);
  margin: 0 0 var(--space-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
}
:is(.build-chapter, .ds-demo) .cc-kicker--loose { margin-bottom: var(--space-md); }

/* The overview panel: a centered title and lede over a row of pieces. */
.cc-panel {
  margin: var(--space-2xl) 0 var(--space-section);
  padding: var(--space-3xl) var(--space-md);
  background: var(--color-warm);
  border: 1px solid var(--rule-card);
  border-radius: var(--radius-xl);
}
@media (min-width: 768px) { .cc-panel { padding: var(--space-block); } }
:is(.build-chapter, .ds-demo) .cc-panel-title { margin: 0 0 var(--space-xl); text-align: center; }
:is(.build-chapter, .ds-demo) .cc-panel-title--tight { margin-bottom: var(--space-xs); }
:is(.build-chapter, .ds-demo) .cc-panel-lede {
  max-width: 48rem;
  margin: 0 auto var(--space-3xl);
  text-align: center;
}
.cc-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 768px) { .cc-panel-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cc-panel-grid--3 { gap: var(--space-3xl); max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .cc-panel-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl); } }
@media (min-width: 1024px) { .cc-panel-grid--3 { gap: var(--space-4xl); } }

/* Innovators' four pieces: white cards with a numbered serif title. */
.cc-mini {
  padding: var(--space-xl);
  background: var(--color-white);
  border: 1px solid var(--rule-card);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.cc-mini-head { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.cc-mini-n {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--color-accent-text); color: var(--color-white);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1;
}
:is(.build-chapter, .ds-demo) .cc-mini-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-charcoal);
}
.cc-mini-list { display: grid; gap: var(--space-sm); }
.cc-mini-item { display: flex; align-items: center; gap: var(--space-sm); }
.cc-mini-icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--color-charcoal); }
.cc-mini-text { font-size: var(--text-sm); line-height: var(--leading-tight); color: var(--color-charcoal); }

/* Dispatch's three methods: round pictures over a caption. */
.cc-circle-item { display: flex; flex-direction: column; align-items: center; }
.cc-circle {
  flex: none;
  width: 16rem; height: 16rem;
  margin-bottom: var(--space-lg);
  border-radius: 50%;
  object-fit: contain;
}
@media (min-width: 1024px) { .cc-circle { width: 18rem; height: 18rem; } }
@media (min-width: 1280px) { .cc-circle { width: 20rem; height: 20rem; } }
:is(.build-chapter, .ds-demo) .cc-circle-cap { margin: 0; padding: 0 var(--space-md); text-align: center; font-size: var(--text-base); }

/* The closing line on the sage, with its drawing. */
.cc-pull {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  background: var(--color-accent-text);
}
.cc-pull-mark { flex: none; display: block; width: 160px; height: auto; }
:is(.build-chapter, .ds-demo) .cc-pull p { margin: 0; color: var(--color-white); }
@media (max-width: 640px) {
  .cc-pull { flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
}

/* A client's own words, under the hero's picture and on the column's left
   edge, whole sentences from what she wrote. The serif at the pull's size,
   the name under it in the sans, and a link to where she wrote it. Nothing
   here names the company; the link's page does, one press away. */
.case-testimonial { max-width: var(--measure); margin: 0; }
.case-testimonial blockquote { margin: 0; padding: 0; border: 0; }
.case-testimonial p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
  text-wrap: pretty;
  color: var(--color-charcoal);
}
.case-testimonial figcaption {
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-accent-text);
}

.case-testimonial figcaption a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--motion-state) var(--ease);
}
.case-testimonial figcaption a:focus-visible { color: var(--color-charcoal); }
@media (hover: hover) and (pointer: fine) {
  .case-testimonial figcaption a:hover { color: var(--color-charcoal); }
}

/* ---------- The overview, in brief ----------
   As it was on the Tailwind pages from 2026-10-29: the Overview as a grid
   of fields, each paragraph under a field label (the Kicker, the hero's own
   CLIENT and MY ROLE), on the tea-light feature ground, which the chapter
   supplies as .ground-tea. From 64rem three to a row with the column gap
   alone between them; a first field of four (USDA's client) takes the
   whole row above the other three, held to the measure. Stacked, 32px
   apart. The paragraphs are the page's reading paragraph. */
.cc-brief { display: flex; flex-direction: column; gap: var(--space-2xl); }
:is(.build-chapter, .ds-demo) .cc-brief .cc-kicker { margin: 0 0 var(--space-sm); }
.cc-brief p { margin: 0; }
/* A drawing over a column, in the rail's hand: wordless, so the paragraph
   under it stays the only words. On a white ground multiplied onto the
   section's, as a rail's are, because a cut-out leaves a white fringe on the
   outlines. One height, so three kickers share a line; 16rem is a picture's
   height, not a space, so no token. */
.cc-brief-art { display: block; width: auto; height: 16rem; max-width: 100%; margin: 0 0 var(--space-lg); mix-blend-mode: multiply; }
@media (min-width: 64rem) {
  .container.case-narrow > .cc-brief { width: var(--col-full); max-width: var(--col-full); }
  .cc-brief {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3xl) var(--space-4xl);
  }
  .cc-brief-item:first-child:nth-last-child(4) { grid-column: 1 / -1; }
  .cc-brief-item:first-child:nth-last-child(4) p { max-width: var(--measure); }
}

/* ---------- The impact table ----------
   As it was: a warm card holding a Dimension and Outcome table, each
   dimension led by its icon in a sage disc (white on --color-accent-text,
   5.82:1), rows on --color-tag-border hairlines. The first track is 130px
   on a phone and 250px from 768, a column width rather than a space, so
   no token. The card is as wide as its own contents: the measure the
   outcomes are held to, the dimension track, the gap, and the card's
   inset on both sides, so the longest line ends on the padding. "How I
   measured this" and the closing line sit inside it, as its footnotes. */
.cc-impact {
  max-width: calc(var(--measure) + 250px + var(--space-4xl) + 2 * var(--space-3xl));
  margin: var(--space-2xl) 0 0;
  font-family: var(--font-sans);
}
.cc-impact-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-tag-border);
}
.cc-impact-head { padding: 0 0 var(--space-xs); }
@media (min-width: 768px) {
  .cc-impact-row { grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-4xl); }
}
.cc-impact-dim {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-charcoal);
}
.cc-impact-head > * { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-charcoal); }
.cc-impact-out {
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-charcoal);
}
.cc-impact-disc {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-accent-text);
  color: var(--color-white);
}
.cc-impact-disc svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; }
.cc-impact .cc-pull { margin-top: var(--space-xl); }
@media (min-width: 1024px) {
  .container.case-narrow > .cc-card.cc-impact {
    width: auto;
    max-width: calc(var(--measure) + 250px + var(--space-4xl) + 2 * var(--space-3xl));
  }
}

/* ---------- Who I worked with, and what on ----------
   SAP's pair of warm cards under the Overview, as they were on Tailwind
   until #786 cut them and the owner asked for them back: a title, a line
   under it, and a white panel of six pieces, each a line icon in the sage
   over its name. Two to a row from 768, beside each other at the page's
   full width from 1024, as .cc-grid already does. The panel's 32px inset,
   the pieces' 32px gap and the 48px between rows from 768 are the old
   p-8, gap-8 and gap-y-12. */
.cc-card--roster { display: flex; flex-direction: column; }
:is(.build-chapter, .ds-demo) .cc-roster-title { margin-bottom: var(--space-xs); font-size: var(--text-xl); }
:is(.build-chapter, .ds-demo) .cc-card--roster .cc-label { margin-bottom: var(--space-xl); }
:is(.build-chapter, .ds-demo) .cc-roster {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: var(--space-2xl);
  margin: 0;
  padding: var(--space-2xl);
  list-style: none;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) { :is(.build-chapter, .ds-demo) .cc-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { :is(.build-chapter, .ds-demo) .cc-roster { row-gap: var(--space-4xl); } }
:is(.build-chapter, .ds-demo) .cc-roster li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-charcoal);
}
:is(.build-chapter, .ds-demo) .cc-roster li::before { content: none; }
.cc-roster-icon {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: var(--color-accent-text);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* SAP's four moves: drawings in white circles on one line, a number on each
   circle, a name and a line under each. Two across on a phone, where the line
   drops out. The drawings are wordless and sit high in their square, so the
   number has the foot of the circle to itself. */
.cc-moves {
  counter-reset: cc-move;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .cc-moves { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xl); }
  .cc-moves::before {
    content: "";
    position: absolute;
    top: 4rem; left: 12.5%; right: 12.5%;
    height: 1px;
    background: var(--color-rule);
  }
}
.cc-move { counter-increment: cc-move; position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; text-align: center; }
.cc-move::before { content: none; }
.cc-move::after {
  content: counter(cc-move);
  position: absolute;
  top: calc(5rem - var(--space-lg) - var(--space-2xs));
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--space-lg);
  height: var(--space-lg);
  border-radius: 50%;
  background: var(--color-accent-text);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
  transform: translateX(-50%);
}
.cc-move-img {
  width: 5rem; height: 5rem;
  margin-bottom: var(--space-sm);
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  object-fit: cover;
}
@media (min-width: 768px) { .cc-move-img { width: 8rem; height: 8rem; margin-bottom: var(--space-md); } }
@media (min-width: 768px) {
  .cc-move::after {
    top: calc(8rem - var(--space-xl) - var(--space-xs));
    width: var(--space-xl);
    height: var(--space-xl);
    font-size: var(--text-xs);
  }
}
:is(.build-chapter, .ds-demo) .cc-move-title {
  max-width: 10rem;
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
  color: var(--color-charcoal);
}
@media (min-width: 768px) { :is(.build-chapter, .ds-demo) .cc-move-title { font-size: var(--text-2xl); } }
:is(.build-chapter, .ds-demo) .cc-move-text { margin: 0; font-size: var(--text-sm); line-height: var(--leading-tight); color: var(--color-charcoal); }