/* Azul Forward — Case study template
   Loaded after styles.css. Seven-section flow: hero, context, contribution,
   key decisions, outcomes, external proof, next work.

   TYPE SCALE — deliberately larger than the rest of the site. This is the
   heaviest reading on the portfolio, and small copy is not acceptable here:
   body runs 19px, supporting text 17px, and nothing drops below 15px.
   When something feels tight, take space or cut words — never shrink type. */

:root {
  --cs-gap-section: 6rem;   /* section → section */
  --cs-gap-head: 2.25rem;   /* heading → its content */
  --cs-measure: 46rem;      /* reading width for body copy */
}

/* ── SHELL ──────────────────────────────────────────────────────────────── */
.cs-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 4rem;
}
.cs-section { padding-top: var(--cs-gap-section); }

/* Numbered marker — echoes the stepped navigation used across the site, and
   gives a scanner a sense of progress through the story. */
.cs-marker {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink);
  margin-bottom: var(--cs-gap-head);
}
.cs-marker-n {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.cs-marker-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.cs-hero { padding-top: var(--space-3xl); }
.cs-eyebrow {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: var(--space-md);
  display: block;
}
.cs-h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 20ch;
  margin-bottom: var(--space-lg);
}
.cs-lead {
  font-size: clamp(20px, 2.3vw, 25px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--mid);
  max-width: var(--cs-measure);
}

/* ── FACT TABLE — role / timeline / scope ───────────────────────────────── */
/* A form-like block: hairline rows, label left, value right. Scannable in
   one pass without reading a sentence. */
.cs-facts {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--line);
}
.cs-fact-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.cs-fact-key {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
  line-height: 1.6;
}
.cs-fact-val {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--body);
}

/* ── METRIC ROW ─────────────────────────────────────────────────────────── */
.cs-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  margin-top: var(--space-2xl);
}
.cs-metrics--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
.cs-metrics--4 .cs-metric-n { font-size: clamp(30px, 3.6vw, 44px); }
.cs-metric { border-top: 3px solid var(--ink); padding-top: 1.15rem; }
.cs-metric-n {
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.cs-metric-label {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mid);
}
/* Optional second line under the label: the detail behind the number. */
.cs-metric-note {
  margin-top: 0.5rem;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--label);
}

/* ── HEADINGS & BODY ────────────────────────────────────────────────────── */
.cs-h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 22ch;
  margin-bottom: var(--space-lg);
}
.cs-body {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--body);
  max-width: var(--cs-measure);
}
.cs-body + .cs-body { margin-top: 1.5rem; }
.cs-body strong { font-weight: 600; color: var(--ink); }

/* Framing question / emphasis — the one serif moment, as in the design system */
.cs-emphasis {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.6;
  color: var(--ink);
  max-width: var(--cs-measure);
  margin-top: var(--space-lg);
  padding-left: var(--space-md);
  border-left: 3px solid var(--ink);
}

/* ── CONTRIBUTION LIST — form-like rows ─────────────────────────────────── */
/* Each row: what I did (left) and how (right). Rules make it digestible at a
   glance rather than four paragraphs in a stack. */
.cs-rows { border-top: 1px solid var(--line); }
.cs-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--line);
}
.cs-row-head {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.cs-row-body {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--mid);
}

/* ── IMAGE GALLERY ──────────────────────────────────────────────────────── */
.cs-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem;
  margin-top: var(--space-2xl);
}
.cs-gallery--wide { grid-template-columns: 1fr; }
/* Two stacked figures on the left, one tall figure on the right. align-items:
   start keeps each column measured from the top rather than stretching the
   shorter one to match. */
.cs-gallery--split { align-items: start; }
.cs-gallery-col {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
/* 2:3 sits within a point of this asset's own 0.65 ratio, so it fills the
   frame instead of letterboxing the way the 3:4 --tall frame would. */
.cs-shot--portrait .cs-shot-frame { aspect-ratio: 2/3; }
.cs-shot { margin: 0; }
/* Whole image, never cropped. `contain` fits it inside the frame, the inset
   keeps it off the edges, and the light card colour behind reads as a mount
   rather than dead space. 16/9 is the default because nearly every asset
   here is 16/9 — so most images fill the frame with almost no letterbox,
   and the odd portrait or panorama still shows in full. */
.cs-shot-frame {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-shot--tall .cs-shot-frame { aspect-ratio: 3/4; }
.cs-shot--wide .cs-shot-frame { aspect-ratio: 21/9; }
.cs-shot-frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.cs-shot-cap {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--sub);
  margin-top: 0.9rem;
}

/* ── SELECTED EXPERIMENTS ───────────────────────────────────────────────── */
/* Named pieces of a venture, shown three-up: image, name, what it is. */
.cs-experiments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}
.cs-experiment-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 1.35rem 0 0.65rem;
}
.cs-experiment-body {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--mid);
}
/* Variant with no image: a rule stands in for the picture, and the copy runs
   at body size because it is doing the whole job on its own. */
.cs-experiments--plain .cs-experiment {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}
.cs-experiments--plain .cs-experiment-name { margin-top: 0; }
.cs-experiments--plain .cs-experiment-body {
  font-size: 19px;
  line-height: 1.75;
  color: var(--body);
}
.cs-experiment-audience {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 0.9rem;
}
.cs-experiment-audience span {
  display: block;
  margin-top: 0.35rem;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mid);
}

/* ── TESTIMONIAL ────────────────────────────────────────────────────────── */
.cs-quote {
  max-width: var(--cs-measure);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
}
.cs-quote-text {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--body);
  margin-bottom: var(--space-md);
}
.cs-quote-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.cs-quote-role {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--sub);
}

/* ── NEXT WORK ──────────────────────────────────────────────────────────── */
.cs-next {
  display: block;
  margin-top: var(--cs-gap-section);
  padding: var(--space-lg) 0 var(--space-2xl);
  border-top: 1px solid var(--ink);
  transition: opacity 0.2s;
}
.cs-next:hover { opacity: 0.62; }
.cs-next-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 0.85rem;
}
.cs-next-title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.cs-next-sub {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--mid);
  max-width: var(--cs-measure);
}
.cs-next-sub span { flex-shrink: 0; }
/* Optional: carry the next project's headline result, so the link previews
   what's waiting rather than only naming it. */
.cs-next-outcome {
  margin-top: 0.9rem;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--ink);
}

/* Placeholder shell for sections still awaiting content. */
.cs-placeholder {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: var(--space-lg);
  max-width: var(--cs-measure);
  font-size: 18px;
  line-height: 1.7;
  color: var(--sub);
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --cs-gap-section: 4rem; --cs-gap-head: 1.75rem; }
  .cs-wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
  .cs-hero { padding-top: var(--space-lg); }
  .cs-fact-row { grid-template-columns: 1fr; gap: 0.4rem; padding: 1rem 0; }
  .cs-metrics { grid-template-columns: 1fr; gap: var(--space-lg); }
  .cs-metrics--4 { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .cs-row { grid-template-columns: 1fr; gap: 0.75rem; }
  .cs-gallery { grid-template-columns: 1fr; gap: var(--space-lg); }
  .cs-experiments { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .cs-h1, .cs-h2 { max-width: none; }
}

@media (max-width: 600px) {
  /* Type holds its size here — only the frame tightens. */
  .cs-quote { padding: var(--space-md); }
  .cs-shot-frame { padding: 0.6rem; border-radius: 6px; }
  /* A 21:9 band is unreadably short on a phone; relax it toward 16/9. */
  .cs-shot--wide .cs-shot-frame { aspect-ratio: 16/9; }
}

/* ── ABOUT PAGE COMPONENTS ──────────────────────────────────────────────
   Cards, numbered steps and quiet labels used by the About page. */
.cs-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--label);
  margin-bottom: 0.35rem;
}
/* Card grids — used for opportunities, decisions, guardrails, measures. */
.cs-grid { display: grid; gap: 1rem; margin-top: var(--space-lg); }
.cs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-card {
  padding: 1.5rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cs-card h3 {
  margin: 0 0 0.55rem;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cs-card p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--mid); }
.cs-card--accent { background: var(--card-treatment-ai); border-color: var(--card-treatment-ai); }
.cs-card--accent h3, .cs-card--accent p { color: #fff; }
.cs-card--accent .cs-label { color: rgba(255,255,255,.8); }
.cs-chain-row .cs-label { display: none; }
/* Numbered sequence — the experience model and the contribution areas. */
.cs-steps { margin-top: var(--space-lg); border-top: 1px solid var(--line); counter-reset: step; }
.cs-step {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--line);
}
.cs-step-n {
  font-size: 17px; font-weight: 600; color: var(--label);
  font-variant-numeric: tabular-nums;
}
.cs-step h3 { margin: 0 0 0.4rem; font-size: 19px; font-weight: 600; color: var(--ink); }
.cs-step p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--mid); }

@media (max-width: 900px) {
  .cs-grid--3, .cs-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  /* Stack rather than shrink: labels stay readable. */
  .cs-grid--2, .cs-grid--3, .cs-flow { grid-template-columns: 1fr; }
  .cs-chain-row .cs-label { display: block; }
  .cs-step { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.9rem; }
}

/* The rule between rows separates one from the next; under the final row it
   separates nothing and just draws a line across the end of the section. The
   section's own spacing closes the group. Same component on all six case
   pages, so this is fixed once here rather than per page. Same for the fact
   list and the numbered steps: each ends a section, and the next section opens
   with its own darker rule. */
.cs-rows .cs-row:last-child,
.cs-facts .cs-fact-row:last-child,
.cs-steps .cs-step:last-child { border-bottom: none; }

/* An outcome column that carries a statement instead of a figure. Sized to lead
   its column at heading weight without the display size a number needs. */
.cs-metric-head {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* Scale or provenance stated as sourced context, deliberately not in the
   outcomes section, so a platform-wide figure cannot read as a project result. */
.cs-context { margin-top: var(--space-2xl); }
.cs-context .cs-body { margin-top: 0.5rem; }


/* ── AI CASE: PUBLIC CONTEXT, SOURCE NOTES, AUTHORED MODEL ───────────────── */

/* Emphasis inside a case headline, using the site's existing serif-italic
   idiom rather than a new one. */
.cs-h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* Provenance stated quietly. A source note is not a disclaimer: it should read
   as a citation, so it sits at body scale in the label colour, never boxed or
   warning-coloured. Type stays at 16px. */
.cs-source {
  margin-top: 0.85rem;
  font-size: 16px;
  line-height: 1.65;
  color: var(--label);
}
.cs-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cs-source a:hover { color: var(--ink); }
.cs-source-note { margin-top: var(--space-2xl); }

/* Caption headings for authored or reconstructed artefacts. */
.cs-shot-cap-title {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

/* An authored concept model, drawn in HTML rather than shipped as an image:
   nothing embedded to leak, no file metadata, and the text stays selectable
   and translatable. The meaning lives in the intersection of a stage column and
   a row, so it is a real table with scoped headers rather than a flat grid: a
   grid collapses to one column on mobile and silently loses which value belongs
   to which stage. Below the point where four columns stop fitting it scrolls
   inside its own container, so the page itself never scrolls sideways and the
   type never shrinks to fit. */
.cs-model { margin: var(--space-2xl) 0 0; }
.cs-model-title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: var(--space-md);
}
.cs-model-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-model-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 40rem;
}
.cs-model-table th,
.cs-model-table td {
  border: 1px solid var(--line);
  padding: 0.85rem 0.95rem;
  text-align: left;
  vertical-align: top;
}
.cs-model-table thead th {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.cs-model-table thead td { border: 0; }
.cs-model-table tbody th {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  width: 11rem;
}
.cs-model-table tbody td {
  font-size: 16px;
  line-height: 1.55;
  color: var(--mid);
}
.cs-model .cs-shot-cap { margin-top: 0.85rem; }

/* Provenance for the authored model, one line under its caption. Italic and
   quieter than the caption so it reads as a note, not as part of the claim the
   caption makes. Footnote weight: 16px is the floor, never smaller. */
.cs-model-note {
  max-width: var(--cs-measure, var(--max));
  margin-top: 0.5rem;
  font-size: 16px;
  font-style: italic;
  line-height: 1.6;
  color: var(--label);
}


/* A single footnote covering every visual on the page, placed once under the
   project metadata rather than repeated beneath each image. Footnote weight on
   purpose: it is provenance, not a warning, and it should not compete with the
   work. Type stays at 16px — quiet is a colour and spacing decision here, not a
   reason to shrink text. */
.cs-visual-note {
  max-width: var(--cs-measure, var(--max));
  margin-top: var(--space-xl);
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.65;
  color: var(--label);
}
.cs-visual-note b {
  font-weight: 600;
  color: var(--mid);
}


/* ── PROFESSIONAL PRACTICE BLOCK ─────────────────────────────────────────
   Role stays in the facts list above; this block carries the three groups
   that were not already stated. Methods are filled and disciplines-level —
   what a hiring reader scans for. Practices and tools are outlined and
   quieter, so the block reads as curated evidence rather than a skills grid.
   No new palette: the fill is the page's own ink. */
.cs-practice { margin-top: var(--space-xl); }
.cs-practice-grp + .cs-practice-grp { margin-top: var(--space-md); }
.cs-practice-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--label);
  margin-bottom: 0.6rem;
}
/* Tags wrap on their own; none is forced to a shared width, so a long phrase
   stays one tag instead of being clipped or broken mid-term. */
.cs-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cs-tag {
  display: inline-block;
  font-size: 16px;
  line-height: 1.4;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--line);
  color: var(--mid);
  background: transparent;
}
.cs-tag--method {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  font-weight: 500;
}

@media (max-width: 560px) {
  /* Tighter frame only. Tag text holds at 16px rather than shrinking to fit
     more per line — a term that cannot be read is not evidence. */
  .cs-tag { padding: 0.35rem 0.6rem; }
  .cs-tags { gap: 0.4rem; }
}

/* A frame that takes its shape from the image instead of imposing one. Any
   aspect ratio fills it edge to edge with no letterboxing and nothing cropped,
   which is what a designed composition with its own background wants — the mat
   exists to separate a raw screenshot from the page, and these do that already.
   Use it for full-width figures; keep the fixed ratios for 2-up pairs, where
   equal heights are what stop the row looking ragged. */
.cs-shot--auto .cs-shot-frame {
  aspect-ratio: auto;
  padding: 0;
  display: block;
}
.cs-shot--auto .cs-shot-frame img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: fill;
}

/* The opening visual. One image, full width, no grid around it — a ten-second
   signal, not a gallery. Evidence keeps the 2-up grid further down. */
.cs-opener { margin-top: var(--space-2xl); }

/* A portrait opener would be a wall at full width — 1176x1800 renders about
   1460px tall in the content column. Cap the height and centre it instead, so
   it opens the page without becoming the page. */
.cs-shot--cap .cs-shot-frame { text-align: center; }
.cs-shot--cap .cs-shot-frame img {
  width: auto;
  max-width: 100%;
  max-height: 560px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .cs-shot--cap .cs-shot-frame img { max-height: 420px; }
}

/* Three experiments read one after another at full width rather than as three
   narrow columns: these are product screens, and at a third of the column their
   interfaces stop being legible. The frame takes its shape from the image, as
   elsewhere, so none of the three is letterboxed. */
.cs-experiments--stacked {
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
.cs-experiments--stacked .cs-shot-frame {
  aspect-ratio: auto;
  padding: 0;
  display: block;
}
.cs-experiments--stacked .cs-shot-frame img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: fill;
}
.cs-experiments--stacked .cs-experiment-name { margin-top: 1.1rem; }


/* Second-level grouping inside a practice group. The parent label keeps the
   uppercase signpost; the sub-label sits in sentence case so the hierarchy is
   readable without a second uppercase row competing with it. Used where an
   inventory is long enough that one flat run of tags stops being scannable. */
.cs-practice-sub {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.cs-tags + .cs-practice-sub { margin-top: var(--space-md); }

/* ══ PRACTICE BLOCK DENSITY ═══════════════════════════════════════════════
   The inventories grew; the type did not shrink. Tags stay at 16px — space is
   taken out of the frame instead, per the type rule: tighten the frame, never
   the type.

   Three levers, in order of what they reclaim:
   1. From 760px up the sub-label moves into its own column, so it no longer
      costs a full line plus margin for every group. That was 32% of the
      block's height.
   2. Chip padding and gaps come in slightly. Legibility is untouched; only
      the air around the words changes.
   3. `li.cs-tag` is used rather than `.cs-tag` so these win against the older
      `.cs-tags li` rule that still exists in the working folder. Without it
      the two folders render this block at different densities. */

.cs-tags li.cs-tag { padding: 0.3rem 0.65rem; }
.cs-tags { gap: 0.4rem; }
.cs-practice-sub { margin-bottom: 0.4rem; }
.cs-tags + .cs-practice-sub { margin-top: 0.95rem; }

@media (min-width: 760px) {
  .cs-practice-grp {
    display: grid;
    grid-template-columns: 158px minmax(0, 1fr);
    column-gap: 1.25rem;
    row-gap: 0.55rem;
    align-items: start;
  }
  /* The uppercase group name is the signpost for the whole group, so it spans
     both columns rather than sitting as a peer of the sub-labels below it. */
  .cs-practice-label { grid-column: 1 / -1; margin-bottom: 0.15rem; }
  /* Sub-label sits beside its own tags. The small padding-top optically aligns
     its cap-height with the first row of chips rather than their box tops. */
  .cs-practice-sub { grid-column: 1; margin: 0; padding-top: 0.32rem; }
  .cs-tags { grid-column: 2; }
  .cs-tags + .cs-practice-sub { margin-top: 0; }
}

/* A group with no sub-labels has nothing to sit in the left column, so its
   tags align to the group title instead of indenting past an empty gutter.
   Applies to Methods & disciplines everywhere, and to Selected practices on
   the pages where that list is flat. :has() is the test; browsers without it
   simply keep the indented layout, which is the previous behaviour. */
@media (min-width: 760px) {
  .cs-practice-grp:not(:has(.cs-practice-sub)) .cs-tags { grid-column: 1 / -1; }
}

/* The working folder still carries an older `.cs-tags li` rule that rounds
   these to 6px; the deploy folder has never had it, so the same block has been
   rendering at two different corner radii. Pinning it here makes both folders
   match what is actually published. */
.cs-tags li.cs-tag { border-radius: 0; }

/* ── WHAT MY CONTRIBUTION DREW ON ──────────────────────────────────────────────────
   Closes "My contribution": the rows above say what Azul did, this says with
   which methods, practices and tools. Set as a colophon: terms run on as text
   with a spaced dot between each, so the block stays compact without pills.
   Hierarchy comes from weight and letter spacing, not from fading to grey —
   every word is full ink, and sizes stay at reading size for legibility.
   DM Mono gives the terms a precise, spec-sheet texture within the DM family. */
.cs-how { margin-top: var(--space-2xl); }
.cs-how-h {
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: var(--space-md);
}
.cs-how-row {
  padding: 1.6rem 0 1.9rem;
  border-top: 1px solid var(--line);
}
/* No closing rule: the next section's own rule already separates it. */
.cs-how-row:last-child { padding-bottom: 0; }
.cs-how-key {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.cs-how-line {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.01em;
  color: var(--ink);
  max-width: 72ch;
}
.cs-how-line + .cs-how-line { margin-top: 1.25rem; }
.cs-how-line--lead { font-weight: 500; }
/* Group name runs in ahead of its terms, in the page's sans. */
.cs-how-sub {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-right: 0.8em;
  white-space: nowrap;
}
/* A real list, so assistive tech announces it as one; shown inline. */
.cs-how-terms { display: inline; list-style: none; margin: 0; padding: 0; }
.cs-how-terms li { display: inline; }
/* The separator travels with the term before it, so a line never starts with
   a dot. Empty alt text keeps screen readers from announcing it. Blue is the
   Strategy capability colour, as used by the hero accent. */
.cs-how-terms li:not(:last-child)::after {
  content: "·";
  content: "·" / "";
  font-family: var(--sans);
  font-weight: 700;
  color: #2948D7;
  margin-left: 0.6em;
  margin-right: 0.1em;
}
/* Keep each term whole on wider screens. */
@media (min-width: 600px) {
  .cs-how-terms li { white-space: nowrap; }
}
/* On a phone a run-in line breaks terms mid-phrase, so the colophon becomes
   a stacked list: group name above, one term per line, long terms hanging. */
@media (max-width: 599px) {
  .cs-how-line { line-height: 1.45; }
  .cs-how-sub { display: block; margin: 0 0 0.35rem; }
  .cs-how-terms { display: block; }
  .cs-how-terms li { display: block; padding: 0.2rem 0 0.2rem 1em; text-indent: -1em; }
  .cs-how-terms li:not(:last-child)::after { content: none; }
}

/* Practices and tools fold away, as product pages fold "Details" and "How to
   use": useful to some readers, not needed by everyone. Methods stay open
   because they are the hiring signal. Native <details>, so it works with a
   keyboard and screen readers, and Chrome opens it on find-in-page. */
.cs-how-row.cs-how-fold { padding: 0; }
.cs-how-fold > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  padding: 1.3rem 0;
  margin-bottom: 0;
  cursor: pointer;
}
.cs-how-fold > summary::-webkit-details-marker { display: none; }
.cs-how-fold > summary::after {
  content: "+";
  content: "+" / "";
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.cs-how-fold[open] > summary::after {
  content: "\2013";
  content: "\2013" / "";
}
.cs-how-fold > summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.cs-how-fold-body { padding: 0.2rem 0 1.9rem; }