/* Case page options (case-studies/building-products-a.html to -h.html, and options.html). Each option is the case page's
   own system (case.css) with the parts below added. The case page the site links to is unchanged. */

/* ---------- Calm: no scroll-driven effects ----------
   Chapter titles stay where they are and nothing fills as you scroll. The page still rises in, and the charts still grow
   once, as on the home page. */
.calm .cv-ch-head {
  position: static;
}

/* ---------- The revenue chart: each week of 2026 beside the same week of 2025 ----------
   Built like the leads chart (HTML, the page's sans, the same grid lines and bracket): grey for 2025, blue for 2026, the
   change over each pair, and a bracket under the four August weeks the headline compares. */
.rv {
  display: flow-root;
  margin-top: 1.25rem;
}
.rv-plot {
  position: relative;
  height: 12rem;
  margin: 2.25rem 0 0 2.5rem;
}
.rv-bars {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 5%;
  align-items: end;
}
.rv-pair {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10%;
  height: 100%;
}
.rv-pair i {
  flex: 1;
  border-radius: 1.5px 1.5px 0 0;
}
.rv-pair .r25 {
  height: calc(var(--a) * 100%);
  background: #c8c8c8;
}
.rv-pair .r26 {
  height: calc(var(--b) * 100%);
  background: var(--accent);
}
.rv-pair em {
  position: absolute;
  left: 50%;
  bottom: calc(max(var(--a), var(--b)) * 100% + 0.5rem);
  transform: translateX(-50%);
  font-style: normal;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.rv-pair.is-down em {
  color: var(--n500);
}
.rv-x {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 5%;
  height: 1.75rem;
  margin-left: 2.5rem;
}
.rv-x span {
  padding-top: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--n500);
}
.rv-win .ld-br {
  border-color: var(--accent);
}
.rv-win p {
  left: 0;
}
.rv-win b {
  color: var(--accent-ink);
}
.rv-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--n600);
}
.rv-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.rv-key i {
  width: 0.625rem;
  height: 0.625rem;
  background: #c8c8c8;
}
.rv-key .k26 {
  background: var(--accent);
}
@media (max-width: 639.98px) {
  .rv-x span:nth-child(even) {
    visibility: hidden;
  }
  .rv-pair em {
    font-size: 0.625rem;
  }
}
@media (min-width: 640px) {
  .rv-plot {
    height: 15rem;
    margin-left: 3rem;
  }
  .rv-x {
    margin-left: 3rem;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .rv.will-grow .rv-pair i {
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 0.8s var(--ease) calc(0.25s + var(--i) * 70ms);
  }
  .rv.will-grow.is-in .rv-pair i {
    transform: none;
  }
  .rv.will-grow .rv-pair em,
  .rv.will-grow .ld-win p {
    opacity: 0;
    transition: opacity 0.6s var(--ease);
  }
  .rv.will-grow.is-in .rv-pair em {
    opacity: 1;
    transition-delay: calc(0.85s + var(--i) * 70ms);
  }
  .rv.will-grow .ld-br {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.7s var(--ease);
  }
  .rv.will-grow.is-in .ld-br {
    transform: none;
    transition-delay: 1.3s;
  }
  .rv.will-grow.is-in .ld-win p {
    opacity: 1;
    transition-delay: 1.55s;
  }
}

/* The revenue tile: in a board it takes a full row, its number and what the number covers on the left, the chart on the
   right. */
.rv-tile .rv-note {
  display: block;
  max-width: 22rem;
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--n600);
  text-wrap: pretty;
}
.rv-tile .rv-key {
  margin-top: 1.25rem;
}
.rv-tile .cs-note {
  margin-top: 1.25rem;
}
@media (min-width: 1100px) {
  .cv-tiles > .rv-tile {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 3rem;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .cv-tiles > .rv-tile:first-child {
    border-top: 0;
  }
  .rv-tile .rv-chart {
    min-width: 0;
  }
}

/* ---------- Numbers in a row: each under a hairline, like the facts ---------- */
.co-stats {
  display: grid;
  gap: 2rem;
  margin: 0;
}
.co-stat {
  padding-top: 1.25rem;
  border-top: 1px solid var(--n200);
}
.co-stat dd {
  margin: 0;
}
.co-stat-num {
  font-weight: 500;
  font-size: clamp(2.75rem, 2.1rem + 1.9vw, 4rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.co-stat-label {
  margin-top: 0.875rem;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
}
.co-stat-sub {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--n600);
  text-wrap: pretty;
}
@media (min-width: 640px) {
  .co-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .co-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Inside a chapter: sub-heads, and a figure that takes the full width ---------- */
.co-sub {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.cv-ch-body > .co-sub {
  margin-top: 3rem;
}
.cv-ch-body > .co-sub:first-child {
  margin-top: 0;
}
.cv-ch-body > .co-sub + * {
  margin-top: 1rem;
}
.co-wide {
  margin-top: 1.25rem;
}
@media (min-width: 1024px) {
  .cv-ch > .co-wide {
    grid-column: 1 / -1;
  }
  .cv-ch > .co-after {
    grid-column: 7 / span 6;
  }
}

/* ---------- Tables: the dated steps, and the notes on the numbers ---------- */
.co-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--n200);
}
.co-table th,
.co-table td {
  padding: 1.125rem 1.5rem 1.125rem 0;
  border-bottom: 1px solid var(--n200);
  text-align: left;
  vertical-align: top;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.co-table th {
  width: 38%;
  font-weight: 600;
  color: var(--ink);
}
.co-table td {
  color: var(--n700);
}
.co-table td:last-child,
.co-table th:last-child {
  padding-right: 0;
}
.co-table .is-next th,
.co-table .is-next td {
  color: var(--n600);
}
@media (min-width: 640px) {
  .co-table th {
    width: 32%;
  }
}

.co-notes-lead {
  max-width: 46rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--n700);
  text-wrap: pretty;
}
.co-notes-rows {
  margin-top: 1.5rem;
  border-top: 1px solid var(--n200);
}
.co-notes-row {
  display: grid;
  gap: 0.25rem 2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--n200);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.co-notes-row dt {
  font-weight: 600;
  color: var(--ink);
}
.co-notes-row dd {
  margin: 0;
  color: var(--n700);
}
.co-notes-row dd + dd {
  color: var(--n600);
}
@media (min-width: 768px) {
  .co-notes-row {
    grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr);
  }
}
/* The notes fold away under the FAQ's own row, so the depth is there for anyone who wants it. */
.co-notes {
  margin-top: 4rem;
  border-top: 1px solid var(--n200);
}
.co-notes .qa-a {
  padding-bottom: 2rem;
}

/* ---------- Three columns: what we found, what we built, what it changed (Where we work's box) ---------- */
.co-three .wwb-name {
  margin-top: 1.25rem;
  font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.5rem);
}
.co-three .dept-list li {
  font-size: 1rem;
  line-height: 1.5;
}
.co-three .dept-list li + li {
  margin-top: 0.25rem;
}
.co-three .dept-list b {
  font-weight: 600;
  color: var(--ink);
}
.sec-head + .co-three,
.sec-head + .cv-board,
.co-three + .cv-board {
  margin-top: 4rem;
}
.co-three + .cv-board {
  margin-top: 1.5rem;
}

/* ---------- The bottleneck index: the three, with what each one changed ---------- */
.co-index {
  display: grid;
  gap: 1.75rem 2rem;
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
}
.co-index a {
  display: block;
  height: 100%;
  padding-top: 1.25rem;
  border-top: 1px solid var(--n200);
  transition: border-color 0.2s;
}
.co-index a:hover {
  border-color: var(--ink);
}
.co-index .mono-label {
  color: var(--accent-ink);
}
.co-index strong {
  display: block;
  margin-top: 0.75rem;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.co-index span:last-child {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--n600);
}
@media (min-width: 900px) {
  .co-index {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- How it works' squares, still: all three lit, joined by one drawn line ---------- */
.co-steps {
  position: relative;
  margin-top: 4rem;
}
.co-steps .hwb-step .step-node {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}
@media (min-width: 900px) {
  .co-steps::before {
    content: "";
    position: absolute;
    top: 1.125rem;
    left: 1.125rem;
    width: calc((100% + 3.5rem) * 2 / 3);
    height: 1px;
    background: var(--accent);
  }
}

/* ---------- The before and after ledger ---------- */
.co-ba {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  background: var(--white);
}
.co-ba th,
.co-ba td {
  padding: 1.125rem 1.5rem;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 1rem;
  line-height: 1.5;
}
.co-ba thead th {
  border-top: 0;
  background: var(--page);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--n600);
}
.co-ba thead th:last-child {
  color: var(--accent-ink);
}
.co-ba tbody th {
  font-weight: 600;
  color: var(--ink);
}
.co-ba .was {
  color: var(--n600);
}
.co-ba .now {
  color: var(--ink);
}
.co-ba .now b {
  display: inline-block;
  margin-left: 0.5rem;
  font-weight: 600;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) {
  .co-ba th,
  .co-ba td {
    padding: 1.25rem 2rem;
  }
  .co-ba thead th {
    width: 33.33%;
  }
}
@media (max-width: 899.98px) {
  .co-ba,
  .co-ba tbody,
  .co-ba tr,
  .co-ba th,
  .co-ba td {
    display: block;
  }
  .co-ba thead {
    display: none;
  }
  .co-ba tr + tr {
    border-top: 1px solid var(--line);
  }
  .co-ba tbody th {
    padding-bottom: 0.375rem;
    border-top: 0;
  }
  .co-ba td {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-top: 0;
  }
  .co-ba td:last-child {
    padding-bottom: 1.25rem;
  }
  .co-ba td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    line-height: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--n500);
  }
}

/* ---------- The dated rows: when, what was built, what it changed ---------- */
.co-rows {
  margin-top: 4rem;
  border-top: 1px solid var(--n200);
}
.co-row {
  display: grid;
  gap: 0.75rem 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--n200);
}
.co-row-when h3 {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.co-row-when .mono-label {
  display: block;
  margin-top: 0.375rem;
}
.co-row-what p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--n700);
  text-wrap: pretty;
}
.co-row-what p + p {
  margin-top: 0.75rem;
}
.co-row-res {
  align-self: start;
}
.co-row-num {
  display: block;
  font-weight: 500;
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.co-row-num + span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--n600);
  text-wrap: pretty;
}
.co-row.is-result {
  background: linear-gradient(var(--page), var(--page));
}
.co-row.is-result .co-row-num {
  color: var(--accent-ink);
}
.co-row.is-next .co-row-when h3,
.co-row.is-next p {
  color: var(--n600);
}
.co-row-fig {
  padding: 2rem 0;
  border-bottom: 1px solid var(--n200);
}
@media (min-width: 1024px) {
  .co-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 2.5rem 0;
  }
  .co-row-when {
    grid-column: 1 / span 3;
  }
  .co-row-what {
    grid-column: 4 / span 5;
  }
  .co-row-res {
    grid-column: 10 / span 3;
  }
  .co-row-fig {
    padding: 3rem 0;
  }
}

/* ---------- The span: twenty months on one line, each piece where it fell ---------- */
.co-span {
  position: relative;
  margin-top: 4rem;
}
.co-span-track {
  position: relative;
  height: 9rem;
}
.co-span-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--n300);
}
.co-span-yr {
  position: absolute;
  top: calc(50% + 0.75rem);
  left: calc(var(--x) * 100%);
  padding-left: 0.5rem;
  border-left: 1px solid var(--n300);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  color: var(--n500);
}
.co-span-seg {
  position: absolute;
  top: calc(50% - 2px);
  left: calc(var(--x) * 100%);
  width: calc(var(--w) * 100%);
  height: 5px;
  background: var(--accent);
}
.co-span-pt {
  position: absolute;
  top: 50%;
  left: calc(var(--x) * 100%);
  width: 0;
}
.co-span-pt i {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border: 1px solid var(--accent);
  background: var(--white);
}
.co-span-pt.is-key i {
  background: var(--accent);
}
.co-span-pt.is-next i {
  border-style: dashed;
  border-color: var(--n400);
}
.co-span-pt span {
  position: absolute;
  left: -0.5rem;
  width: max-content;
  max-width: 11rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--n700);
}
.co-span-pt.up span {
  bottom: 1.25rem;
}
.co-span-pt.down span {
  top: 1.25rem;
}
.co-span-pt span b {
  display: block;
  font-weight: 600;
  color: var(--ink);
}
.co-span-pt.end span {
  left: auto;
  right: -0.5rem;
  text-align: right;
}
@media (max-width: 899.98px) {
  .co-span {
    display: none;
  }
}

/* ---------- The close: the method in one line, and the way in ---------- */
.co-close {
  max-width: 52rem;
}
.co-close-line {
  font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: pretty;
}
.co-close p + p {
  margin-top: 1.25rem;
}
.co-close .cv-text {
  max-width: 42rem;
}
.co-close .work-cta {
  margin-top: 2.5rem;
}

/* ---------- The report: one column, as the case study was written ---------- */
.co-doc .wrap > * {
  max-width: 50rem;
}
.co-doc-sec + .co-doc-sec {
  margin-top: 5rem;
  padding-top: 5rem;
  border-top: 1px solid var(--n200);
}
.co-doc-no {
  color: var(--accent-ink);
}
.co-doc-sec > h2 {
  margin-top: 1rem;
  font-weight: 600;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.co-doc-sec > h2 + * {
  margin-top: 2rem;
}
.co-doc-sec > * + * {
  margin-top: 1.25rem;
}
.co-doc-sec > .co-sub {
  margin-top: 2.75rem;
}
.co-doc-sec > .co-sub + * {
  margin-top: 0.875rem;
}
.co-doc-sec > .cv-list,
.co-doc-sec > .co-stats,
.co-doc-sec > .co-table,
.co-doc-sec > .co-fig {
  margin-top: 2rem;
}
.co-doc-sec > .cv-list + * {
  margin-top: 2rem;
}
.co-fig {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 2rem 1.5rem 1.5rem;
}
.co-fig .cs-note {
  margin-top: 1rem;
}
.co-fig + .co-fig {
  margin-top: 1.5rem;
}
@media (min-width: 640px) {
  .co-fig {
    padding: 2.5rem 2rem 1.75rem;
  }
}
@media (min-width: 1024px) {
  .co-doc .wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .co-doc .wrap > * {
    grid-column: 3 / span 8;
    max-width: none;
  }
}
.co-glance {
  margin: 3rem 0 0;
  border-top: 1px solid var(--n200);
}
.co-glance > div {
  display: grid;
  gap: 0.25rem 2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--n200);
}
.co-glance dt {
  padding-top: 0.125rem;
}
.co-glance dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}
@media (min-width: 640px) {
  .co-glance > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

/* ---------- The scorecard: four numbers across the board's top ---------- */
.co-kpis {
  display: grid;
  border-bottom: 1px solid var(--line);
}
.co-kpi {
  padding: 1.75rem 1.5rem;
}
.co-kpi + .co-kpi {
  border-top: 1px solid var(--line);
}
.co-kpi .cv-kpi-num {
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
}
.co-kpi small {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--n600);
  text-wrap: pretty;
}
@media (min-width: 640px) {
  .co-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .co-kpi {
    padding: 2rem;
  }
  .co-kpi + .co-kpi {
    border-top: 0;
  }
  .co-kpi:nth-child(even) {
    border-left: 1px solid var(--line);
  }
  .co-kpi:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}
@media (min-width: 1100px) {
  .co-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .co-kpi {
    padding: 2.25rem 2.5rem;
  }
  .co-kpi + .co-kpi {
    border-left: 1px solid var(--line);
  }
  .co-kpi:nth-child(n + 3) {
    border-top: 0;
  }
}
.co-also {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.co-also li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--n700);
}
.co-also b {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.co-also-title {
  margin-bottom: 1rem;
}

/* ---------- The options bar (tool chrome, not part of the design) ---------- */
.has-cob {
  padding-bottom: 4.5rem;
}
.cob {
  gap: 1rem;
}
.cob-hub {
  white-space: nowrap;
  color: rgb(255 255 255 / 0.72);
}
.cob-hub:hover {
  color: var(--white);
}
.cob .opt-group a.cob-o {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  border: 1px solid rgb(255 255 255 / 0.22);
  font: 500 0.75rem/1 var(--mono);
  color: var(--white);
}
.cob .opt-group a.cob-o:hover {
  border-color: rgb(255 255 255 / 0.6);
}
.cob .opt-group a.cob-o[aria-current] {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}
.cob-cap {
  padding-left: 1rem;
  border-left: 1px solid rgb(255 255 255 / 0.18);
  font-size: 0.75rem;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.72);
}
@media (max-width: 899.98px) {
  .cob-cap {
    display: none;
  }
}

/* ---------- The options hub ---------- */
.ch-grid {
  display: grid;
  gap: 1.5rem;
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
}
.ch-card {
  display: grid;
  border: 1px solid var(--line);
  background: var(--white);
}
.ch-shot {
  display: block;
  overflow: hidden;
  height: 22rem;
  border-bottom: 1px solid var(--line);
  background: var(--band);
}
.ch-shot img {
  width: 100%;
  height: auto;
}
.ch-body {
  padding: 1.75rem 1.5rem 2rem;
}
.ch-body h2 {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.ch-body h2 .mono-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--accent-ink);
}
.ch-pitch {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}
.ch-spec {
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--line);
}
.ch-spec > div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.ch-spec dt {
  padding-top: 0.1875rem;
}
.ch-spec dd {
  margin: 0;
  color: var(--n700);
}
.ch-body .work-link {
  margin-top: 1.5rem;
}
.ch-pick {
  margin-top: 4rem;
  padding: 2rem 1.5rem;
  border: 1px solid rgb(var(--accent-rgb) / 0.45);
  background: #f3f6ff;
}
.ch-pick p {
  max-width: 52rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.ch-pick p + p {
  margin-top: 0.75rem;
}
@media (min-width: 640px) {
  .ch-body {
    padding: 2rem;
  }
  .ch-pick {
    padding: 2.25rem 2.5rem;
  }
}
@media (min-width: 900px) {
  .ch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Small shared pieces ---------- */
.co-sec {
  padding-block: var(--sec);
  border-bottom: 1px solid var(--line);
}
.co-band {
  background: var(--band);
}
.co-stat {
  display: flex;
  flex-direction: column;
}
.co-stat-num {
  order: -1;
}
.cv-ch-body.co-after {
  padding-top: 0;
}
.cv-ch-head .step-node {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}
@media (min-width: 1024px) {
  .cv-ch.has-node > .cv-ch-body:not(.co-after) {
    padding-top: calc(3.25rem - 1px);
  }
}
.co-notes .qa-a .co-notes-lead {
  padding-bottom: 0;
  font-size: 1rem;
}
.co-also-tile .ld-title {
  margin-bottom: 1rem;
}
@media (min-width: 900px) {
  .co-also {
    columns: 2;
    column-gap: 3rem;
  }
  .co-also li {
    break-inside: avoid;
  }
}
@media (min-width: 1100px) {
  .cv-tiles > .co-also-tile {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
.sec-head + .co-ba,
.sec-head + .co-rows,
.sec-head + .co-span,
.sec-head + .co-steps,
.sec-head + .co-index {
  margin-top: 4rem;
}

/* The report keeps its head in the one column too. */
.co-doc .cv-head-grid {
  display: block;
}
.co-doc .cv-lead {
  max-width: none;
  margin-top: 2rem;
}

/* The dates, still: every square lit and joined, with what's next on a dashed square and a dashed join. */
.co-tl-still .hwb-step {
  position: relative;
}
.co-tl-still .hwb-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.125rem;
  top: 1.125rem;
  width: 1px;
  height: calc(100% + 2rem);
  background: var(--accent);
}
.co-tl-still .hwb-step:nth-last-child(2)::after {
  background: repeating-linear-gradient(var(--n300) 0 3px, transparent 3px 7px);
}
.co-tl-still .hwb-step .step-node {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}
.co-tl-still .hwb-step.cv-next .step-node {
  border-color: var(--n300);
  border-style: dashed;
  background: var(--page);
  color: var(--n500);
}
.co-tl-still .hwb-step.cv-next h3,
.co-tl-still .hwb-step.cv-next p {
  color: var(--n600);
}
.co-span-pt span {
  max-width: 9.5rem;
}
@media (max-width: 1199.98px) {
  .co-span {
    display: none;
  }
}

/* Sub-heads a step above the list titles (the card-title size). */
.co-sub {
  font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.5rem);
  line-height: 1.25;
}

/* A chapter's parts as ruled rows: the part's name on the left, under the chapter, and its content on the right. */
.co-subrow {
  display: grid;
  row-gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--n200);
}
.cv-ch > .co-subrow {
  margin-top: 1.75rem;
}
.co-subh {
  font-weight: 600;
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.co-subb > * + * {
  margin-top: 1.25rem;
}
.co-subb > .cv-list:first-child {
  border-top: 0;
}
.co-subb > .cv-list:first-child li:first-child {
  padding-top: 0;
}
.co-subb > .cv-list:last-child li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
/* The same where a list ends a section: the next section's divider closes it, so the list's own last rule would stack on it
   (Michael, 14 October). Lists followed by text in the same section keep their closing rule. */
.co-doc-sec > .cv-list:last-child li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
@media (min-width: 1024px) {
  .cv-ch > .co-subrow {
    grid-column: 1 / -1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    margin-top: 2.25rem;
  }
  .co-subh {
    grid-column: 1 / span 5;
  }
  .co-subb {
    grid-column: 7 / span 6;
  }
}

/* The index's three parts line up across the columns whatever their titles wrap to (subgrid). */
@media (min-width: 900px) {
  .co-index {
    grid-template-rows: auto auto auto;
    row-gap: 0;
  }
  .co-index li,
  .co-index a {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
  .co-index strong {
    align-self: start;
  }
}