/* ---- Case studies in the Carme style: the same header, background and
   footer as Home and About, a quieter opening, headings with space around
   them instead of bands, rules and outlined echoes, and a pair of cards at
   the end. Loaded after case.css; it changes the look only, never the words
   or their order. ------------------------------------------------------ */
body.cs.cm {
  --cs-font: "Inter", system-ui, sans-serif;
  --heading-font: var(--cs-font);
  --body-font: var(--cs-font);
  font-family: var(--cs-font);
  --bar-h: 84px;
  background: var(--cm-grain) 0 0 / 240px auto, var(--bg);
}

/* the way back, as a plain link above the title */
.cm .a-crumbs {
  margin-bottom: clamp(24px, 4vh, 40px);
  font-size: 0.9375rem;
  color: var(--text-2);
}

/* reading progress: a thin line along the bottom of the header */


/* ---- the opening ----------------------------------------------------- */
body.cs .a-tag {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-2);
}
#main .a-title {
  font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.25rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.045em;
  padding-bottom: clamp(32px, 6vh, 64px);
}
.cs-dot {
  display: none;
}
#main .a-facts {
  padding: 0 0 clamp(8px, 2vh, 24px);
  border: 0;
  gap: 24px clamp(24px, 4vw, 64px);
}
#main .a-lead {
  padding: 0;
  border: 0;
  margin-block: clamp(40px, 7vh, 72px);
}

/* ---- space instead of rules, bands and echoes ------------------------ */
body.cs .a-act:not(.a-act--intro) {
  margin-top: clamp(168px, 28vh, 340px);
  padding-top: 0;
  border-top: 0;
}
/* each section opens with its number in the accent, small, above the title */
body.cs .a-act:not(.a-act--intro)::before {
  content: counter(cs-act, decimal-leading-zero);
  margin-bottom: 20px;
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}
#main .a-act > h2 {
  margin-top: 0;
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
#main .a-part {
  padding-top: clamp(104px, 17vh, 208px);
}
#main .a-act > .a-part + .a-part {
  padding-top: clamp(104px, 17vh, 208px);
}
#main .a-part > h3 {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
}
/* sub-headings: a small accent dot before the words, nothing else */
#main .a-part > h3::before {
  content: "";
  flex: none;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--accent);
}
#main .a-act--intro > .a-part:not([id]) > h3::before {
  content: none;
}
#main .a-part > h3 + * {
  margin-top: 28px;
}
#main :is(.card-pt, .did, .contrib__team, .acc, .step) {
  border-top: 0;
}
#main .a-part > p {
  font-size: 1.25rem;
  line-height: 1.65;
}
#main .a-part > :is(figure, .figs, .row, .figset, .cards, .steps, .a-quote) {
  margin-block: clamp(56px, 9vh, 112px);
}

/* ---- the index on the left, quieter ---------------------------------- */
body.cs .a-outline li, body.cs .a-outline a {
  background: none;
  box-shadow: none;
}

/* ---- more projects: two cards, as on Home ----------------------------- */
#main .a-more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
#main .a-more a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 20px;
  overflow: hidden;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}
#main .a-more img {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  margin-bottom: 12px;
  border-radius: 0;
}
#main .a-more b, #main .a-more span {
  padding-inline: 20px;
}
@media (max-width: 640px) {
  #main .a-more {
    grid-template-columns: minmax(0, 1fr);
  }
}
.cm .a-crumbs a {
  text-decoration: none;
}

/* the contents index sticks at the top of its column, under the header,
   instead of the bottom */
@media (min-width: 1101px) {
  body.cs .a-side {
    justify-content: flex-start;
  }
  body.cs .a-outline {
    top: calc(var(--bar-h) + 24px);
    bottom: auto;
    margin-top: clamp(24px, 5vh, 48px);
    margin-bottom: 0;
  }
}

/* the outlined echo of each section title, a little stronger on the grain */
#main .a-act > h2[data-ghost]::before {
  opacity: 0.24;
}

/* more room between the pieces inside each part, too */
#main :is(.a-act, .a-part) {
  gap: 28px 0;
}
#main .cards, #main .dids {
  gap: clamp(40px, 6vh, 72px) clamp(24px, 3vw, 48px);
}

/* headings with a gradient: each section title has a bar under it that
   fades from the accent out to nothing, and each sub-heading sits on a soft
   band that fades out to the right, with the accent dot at its start */
#main .a-act > h2::after {
  content: "";
  display: block;
  width: min(100%, 360px);
  height: 4px;
  margin-top: 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
#main .a-part > h3 {
  padding: 14px 24px 14px 18px;
  border-radius: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 4%, transparent) 70%, transparent);
}
#main .a-act--intro > .a-part:not([id]) > h3 {
  padding: 0;
  background: none;
}

/* the content right under a sub-heading sits close to it (the grid's row gap
   already gives a little room) */
#main .a-act .a-part > h3 + * {
  margin-top: -12px;
}

/* ---- Esri case study: the page anatomy, bold lead-ins and placeholders -- */
/* four stacked regions drawn with the page's own words; bars stand in for text */
.anat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.anat__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 8px 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg);
}
.anat__row--two {
  grid-template-columns: 28px minmax(0, 1fr) 64px 64px;
}
.anat__n {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.8125rem;
  font-weight: 600;
}
.anat__name {
  font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 1rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.anat__bars, .anat__table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.anat__bars i, .anat__table i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}
.anat__bars i:nth-child(2) {
  width: 70%;
}
.anat__bars i:nth-child(3) {
  width: 50%;
}
.anat__table i {
  height: 8px;
  background: color-mix(in srgb, var(--line) 80%, transparent);
}
.anat__row--code {
  background: var(--dark-bg);
}
.anat__row--code .anat__name {
  color: var(--on-dark);
}
.anat__row--code .anat__bars i {
  background: rgb(243 246 250 / 0.28);
}
.anat__tile {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.anat__tile b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink);
}
.anat__tile b::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}
.anat__tile .anat__dont::before {
  background: var(--error);
}
@media (max-width: 560px) {
  .anat__row {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .anat__bars, .anat__table {
    display: none;
  }
  .anat__row--two {
    grid-template-columns: 28px minmax(0, 1fr) 56px 56px;
  }
}

/* bullets that open with a bold lead-in */
#main .leads {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-block: 0;
  padding-left: 1.2em;
}
#main .leads li {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-2);
}
#main .leads li::marker {
  color: var(--accent);
}
#main .leads strong {
  color: var(--ink);
  font-weight: 600;
}

/* where a screenshot or wireframe goes: a calm empty frame */
/* the Esri facts stay compact: five short columns, smaller values */
#main .a-hero2 .a-facts dd {
  font-size: 1.0625rem;
  line-height: 1.4;
}

/* ---- simplified wireframes: boxes and bars, no real content ------------- */

/* ---- component previews in the style of Storybook: a frame with tabs, and
   a card per component with a canvas, live elements and its props ------- */
.sb {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.sb__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.sb__dots {
  display: flex;
  gap: 6px;
  margin-right: 14px;
  padding-bottom: 10px;
}
.sb__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}
.sb__tab {
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-2);
}
.sb__tab.is-on {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: inset 0 2px 0 var(--accent);
}
.sb__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}
.sb__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.sb__card--wide {
  grid-column: 1 / -1;
}
.sb__card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
#main .sb__card h4 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sb__tag {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--accent-text);
}
.sb__canvas {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  padding: 22px 18px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 1.2px) 0 0 / 14px 14px,
    var(--surface-2);
}
.sb__canvas--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}
.sb__card footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
.sb__card code {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--text-2);
}

/* button, with a scale control that really works (radio buttons) */
.sb__r {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}
.sb__stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  --pad: 10px 20px;
  --fs: 0.9375rem;
}
.sb__canvas--btn:has(#sb-s:checked) .sb__stage {
  --pad: 6px 14px;
  --fs: 0.8125rem;
}
.sb__canvas--btn:has(#sb-l:checked) .sb__stage {
  --pad: 14px 28px;
  --fs: 1.0625rem;
}
.sb__btn {
  padding: var(--pad);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs);
  font-weight: 500;
  line-height: 1.2;
  transition: padding 0.2s ease, font-size 0.2s ease;
}
.sb__btn--line {
  background: none;
  color: var(--accent-text);
}
.sb__btn--soft {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.sb__btn--off {
  border-color: var(--line);
  background: var(--line);
  color: var(--text-2);
  opacity: 0.7;
}
.sb__ctl {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--text-2);
}
.sb__ctl span {
  margin-right: 6px;
  font-family: "Geist Mono", ui-monospace, monospace;
}
.sb__ctl label {
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}
.sb__canvas--btn:has(#sb-s:checked) label[for="sb-s"], .sb__canvas--btn:has(#sb-m:checked) label[for="sb-m"], .sb__canvas--btn:has(#sb-l:checked) label[for="sb-l"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.sb__canvas--btn:has(.sb__r:focus-visible) .sb__ctl {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* typography */
.sb__canvas--type {
  gap: 4px;
}
.sb__canvas--type p {
  margin: 0 !important;
  color: var(--ink) !important;
}
.sb__t1 {
  font-size: 3.25rem !important;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}
.sb__t2 {
  font-size: 1.5rem !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sb__t3 {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  max-width: 22em;
}
.sb__t4 {
  font-size: 0.8125rem !important;
  color: var(--text-2) !important;
}

/* text and link */
#main .sb__p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}
#main .sb__p--muted {
  font-size: 0.875rem;
  color: var(--text-2);
}
#main .sb__a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* chips */
.sb__chip {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.8125rem;
  color: var(--ink);
}
.sb__chip--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.sb__chip--ok {
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  color: var(--ok);
}
.sb__chip--bad {
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
  color: var(--error);
}

/* input */
.sb__lab {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
}
.sb__lab--err {
  font-weight: 400;
  color: var(--error);
}
.sb__field {
  padding: 9px 12px;
  border: 1.5px solid var(--error);
  border-radius: 6px;
  background: var(--bg);
  font-size: 0.9375rem;
  color: var(--text-2);
}

/* switch */
.sb__sw {
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 24px;
  padding: 3px;
  border-radius: 999px;
  background: var(--line);
}
.sb__sw i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
}
.sb__sw.is-on {
  justify-content: flex-end;
  background: var(--accent);
}
.sb__sw.is-on i {
  background: var(--on-accent);
}
.sb__sw.is-off {
  opacity: 0.45;
}
@media (max-width: 700px) {
  .sb__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sb__btn {
    transition: none;
  }
}
.sb__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: var(--bg);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text-2);
}
.sb__note i {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--accent);
}
.sb__note span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sb__note b {
  font-weight: 600;
  color: var(--ink);
}

/* ---- simple diagrams: one shape to look at in each ---------------------- */
.v {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 32px);
  width: 100%;
  min-height: 190px;
  margin: 0;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--ink) 10%, transparent) 1px, transparent 1.2px) 0 0 / 14px 14px,
    var(--surface-2);
  color: var(--ink);
}
.v b {
  font-weight: 600;
}

/* many sources become one site */
.v__src {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v__src span {
  padding: 8px 16px;
  border: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius: 8px;
  background: var(--bg);
  font-size: 0.875rem;
  color: var(--text-2);
}
.v__arrow {
  position: relative;
  flex: none;
  width: clamp(36px, 8vw, 90px);
  height: 2px;
  background: var(--accent);
}
.v__arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  rotate: 45deg;
}
.v__focus {
  padding: 22px 28px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* three steps, rising */
.v--steps {
  align-items: flex-end;
  gap: 10px;
  padding-bottom: 0;
}
.v__step {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 1;
  max-width: 180px;
  padding: 0 0 14px;
  border-radius: 10px 10px 0 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-bottom: 0;
}
.v__step--1 { height: 70px; }
.v__step--2 { height: 110px; }
.v__step--3 {
  height: 150px;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* design and code, one to switch between */
.v--toggle {
  flex-direction: column;
  gap: 14px;
}
.v__seg {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.v__seg b {
  padding: 7px 22px;
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--text-2);
}
.v__seg b.is-on {
  background: var(--accent);
  color: var(--on-accent);
}
.v__panel {
  display: flex;
  gap: 8px;
  width: min(100%, 260px);
}
.v__panel i {
  flex: 1;
  height: 46px;
  border-radius: 8px;
  background: var(--line);
}

/* do and don't */
.v--dd {
  gap: 14px;
}
.v__half {
  display: flex;
  flex: 1;
  max-width: 190px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 12px;
  border: 2px solid var(--ok);
  border-radius: 12px;
  background: var(--bg);
}
.v__half span {
  font-size: 2rem;
  line-height: 1;
  color: var(--ok);
}
.v__half--dont {
  border-color: var(--error);
}
.v__half--dont span {
  color: var(--error);
}

/* a snippet with its copy button */
.v__snip {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: min(100%, 300px);
  padding: 18px 18px 22px;
  border-radius: 12px;
  background: var(--dark-bg);
}
.v__line {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: rgb(243 246 250 / 0.28);
}
.v__line--s { width: 55%; }
.v__line--m { width: 75%; }
.v__copy {
  align-self: flex-end;
  order: -1;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--accent-on-dark);
  color: var(--dark-bg);
  font-size: 0.75rem;
}

/* the one big number */
.v--num {
  flex-direction: column;
  gap: 6px;
}
.v--num b {
  font-size: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--accent-text);
}
.v--num span {
  font-size: 1rem;
  color: var(--text-2);
}
@media (max-width: 560px) {
  .v--hub {
    flex-direction: column;
  }
  .v__arrow {
    width: 2px;
    height: 36px;
  }
  .v__arrow::after {
    right: -4px;
    top: auto;
    bottom: -1px;
    rotate: 135deg;
  }
}

/* figures are blocks in the case study grid; keep the diagrams as rows */
#main .v {
  display: flex;
  flex-direction: row;
}
#main .v--toggle, #main .v--num {
  flex-direction: column;
}
@media (max-width: 560px) {
  #main .v--hub {
    flex-direction: column;
  }
}

/* two readers */
.v__who {
  display: flex;
  flex: 1;
  max-width: 220px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  font-size: 0.9375rem;
  text-align: center;
}
.v__who--sm {
  flex: none;
  padding: 12px 20px;
  max-width: none;
}
.v__ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
}
.v__ico--tiles {
  place-items: stretch;
  grid-template-columns: repeat(2, 14px);
  grid-auto-rows: 14px;
  gap: 4px;
  align-content: center;
  justify-content: center;
}
.v__ico--tiles i {
  border-radius: 4px;
  background: var(--accent);
}
.v__ico--code {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 1rem;
  font-weight: 700;
}

/* two readers, one page */
.v--one {
  flex-wrap: wrap;
}
.v--one .v__who--sm:first-child {
  margin-bottom: 0;
}

/* two layouts compared */
.v__lay {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.v__lay i {
  display: block;
  width: 120px;
  height: 84px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.v__lay-a {
  background:
    linear-gradient(var(--line) 0 0) 12px 12px / 40% 8px no-repeat,
    linear-gradient(var(--line) 0 0) 12px 28px / 80% 6px no-repeat,
    linear-gradient(var(--line) 0 0) 12px 42px / 70% 6px no-repeat,
    linear-gradient(var(--line) 0 0) 12px 56px / 60% 6px no-repeat,
    var(--bg) !important;
}
.v__lay-b {
  background:
    linear-gradient(var(--line) 0 0) 12px 12px / 30px 60px no-repeat,
    linear-gradient(var(--line) 0 0) 52px 12px / 56px 8px no-repeat,
    linear-gradient(var(--line) 0 0) 52px 28px / 48px 6px no-repeat,
    linear-gradient(var(--line) 0 0) 52px 42px / 40px 6px no-repeat,
    var(--bg) !important;
}
.v__lay b {
  font-size: 0.875rem;
}
.v__vs {
  font-size: 0.8125rem;
  color: var(--text-2);
}

/* easier to scan: shorter lines and a little more room between them */
#main .a-part > p {
  max-width: 34em;
}
#main .a-part > p + p {
  margin-top: -8px;
}
#main .a-part > p strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---- Surgical Console diagrams ------------------------------------------ */
.v__tile {
  display: flex;
  flex: 1;
  max-width: 200px;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  font-size: 0.875rem;
  text-align: center;
}
.v--three .v__tile:nth-child(1) {
  border-color: var(--accent);
}
.v__arms, .v__gal, .v__lib {
  display: grid;
  gap: 5px;
}
.v__arms {
  grid-template-columns: repeat(4, 12px);
}
.v__arms i {
  height: 46px;
  border-radius: 3px;
  background: var(--line);
}
.v__arms i:nth-child(1) { background: var(--ok); }
.v__arms i:nth-child(2) { background: #e0a526; }
.v__arms i:nth-child(3) { background: var(--error); }
.v__gal, .v__lib {
  grid-template-columns: repeat(2, 26px);
}
.v__gal i, .v__lib i {
  display: block;
  height: 20px;
  border-radius: 4px;
  background: var(--line);
}
.v__gal .v__play {
  position: relative;
  background: var(--accent);
}
.v__gal .v__play::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  border-left: 8px solid var(--on-accent);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.v__tab, .v__scr {
  display: inline-block;
  border: 1.5px solid color-mix(in srgb, var(--ink) 40%, transparent);
  border-radius: 4px;
}
.v__tab {
  width: 20px;
  height: 28px;
}
.v__tab i {
  display: block;
  width: 8px;
  height: 2px;
  margin: 10px auto;
  background: var(--accent);
}
.v__to {
  width: 14px;
  height: 2px;
  background: var(--accent);
}
.v__scr {
  width: 38px;
  height: 26px;
  background: linear-gradient(var(--accent) 0 0) 8px 12px / 20px 3px no-repeat;
}
.v--three .v__tile:nth-child(3) {
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 6px;
}
.v--three .v__tile:nth-child(3) b {
  flex-basis: 100%;
}

/* one second */
.v__ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 124px;
  border: 4px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
}
.v__ring b {
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent-text);
}
.v__ring span {
  font-size: 0.8125rem;
  color: var(--text-2);
}

/* six principles around one goal */
.v--hubs {
  flex-direction: column;
  gap: 18px;
}
.v__six {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.v__six span {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.8125rem;
  color: var(--text-2);
}

/* ten dots */
.v--dots {
  flex-direction: column;
  gap: 16px;
}
.v__ten {
  display: flex;
  gap: 10px;
}
.v__ten i {
  width: 22px;
  height: 22px;
  border: 2px solid var(--error);
  border-radius: 50%;
}
.v__ten i.is-ok {
  border-color: var(--ok);
  background: var(--ok);
}
.v--dots p {
  margin: 0;
  font-size: 1rem;
  color: var(--text-2);
}
.v--dots p b {
  font-size: 1.5rem;
  color: var(--ink);
}

/* before, during, after */
.v--flow {
  flex-wrap: wrap;
  gap: 12px;
}
.v__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 120px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  font-size: 0.875rem;
}
.v__stage em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--text-2);
}
.v__stage--two {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.v--flow .v__arrow {
  width: 36px;
}

/* what I handed over */
.v__screen {
  width: 54px;
  height: 38px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 40%, transparent);
  border-radius: 5px;
  background: linear-gradient(var(--accent) 0 0) 8px 10px / 24px 4px no-repeat;
}
.v__lib {
  grid-template-columns: repeat(2, 22px);
}
.v__lib i:first-child {
  background: var(--accent);
}
.v__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 54px;
}
.v__list i {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--line);
}
.v__list i:first-child {
  background: var(--ok);
}
@media (max-width: 560px) {
  .v--three, .v--kit {
    flex-direction: column;
  }
  .v--three .v__tile, .v--kit .v__tile {
    width: 100%;
    max-width: none;
  }
}
.v--hubs {
  flex-direction: column !important;
}
.v--dots {
  flex-direction: column !important;
}

/* ==========================================================================
   Letter-style reading: text sits in one narrow, centred column (about 65
   characters wide) and only pictures, diagrams, cards and the playgrounds go
   wider, so the page has a rhythm of text, then something to look at.
   ========================================================================== */
body.cs .article {
  --a-read: 680px;
  --cs-pic: 1040px;
}
body.cs #main .a-part > *, body.cs #main .a-act > * {
  margin-inline: 0;
}
/* headings, pictures, cards and playgrounds fill the column; running text
   stops at a comfortable line length, on the same left edge */
body.cs #main .a-act > :is(p, ol.steps:not(.steps--cols)), body.cs #main .a-part > :is(p, dl, ul:not(.cards, .dids, .stats, .accs), ol.steps:not(.steps--cols)) {
  width: min(100%, var(--a-read));
  max-width: var(--a-read);
}
body.cs #main .a-part > .a-quote {
  width: min(100%, var(--a-read));
  max-width: var(--a-read);
}
body.cs #main .a-part > p, body.cs #main .a-act > p {
  font-size: 1.1875rem;
  line-height: 1.75;
}
/* the quote and the facts, centred in the same column */
body.cs #main .a-part > .a-quote {
  justify-self: center;
}

/* ==========================================================================
   Sections as steps: a bar that stays under the header with one dot per
   section, joined by a line. The sections you have passed are teal, the one
   you are in is ringed and named. It replaces the old left index. (steps.js
   builds it.)
   ========================================================================== */
body.cs .a-side, body.cs .a-sections {
  display: none !important;
}
body.cs .a-layout {
  display: block;
  padding-inline: 0;
}
body.cs .a-layout > .article {
  max-width: calc(1040px + 2 * var(--gx));
  margin: 0 auto;
  padding-inline: var(--gx);
}
body.cs .article [id] {
  scroll-margin-top: 160px;
}
.cm-steps {
  position: sticky;
  top: var(--cm-top);
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: top 0.24s ease;
}

.cm-steps ol {
  display: flex;
  width: min(100% - 2 * var(--cm-gutter), 1040px);
  margin: 0 auto;
  padding: 12px 0 10px;
  list-style: none;
}
.cm-step {
  flex: 1;
  min-width: 0;
}
.cm-step a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  row-gap: 8px;
  color: var(--text-subtle);
  font-size: 0.75rem;
  line-height: 1.25;
  text-decoration: none;
}
.cm-step a::before, .cm-step a::after {
  content: "";
  height: 2px;
  background: var(--line);
}
.cm-step:first-child a::before, .cm-step:last-child a::after {
  background: transparent;
}
.cm-step__dot {
  width: 14px;
  height: 14px;
  margin-inline: 6px;
  border: 2px solid var(--text-subtle);
  border-radius: 50%;
  background: var(--bg);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.cm-step__label {
  grid-column: 1 / -1;
  overflow: hidden;
  padding-inline: 6px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cm-step a:hover {
  color: var(--ink);
}
/* the line between two dots fills as you scroll from one section to the
   next: steps.js sets --b (the piece before the dot) and --a (the piece
   after it) from 0 to 1 */
.cm-step a::before {
  background: linear-gradient(var(--accent) 0 0) 0 0 / calc(var(--b, 0) * 100%) 100% no-repeat, var(--line);
}
.cm-step a::after {
  background: linear-gradient(var(--accent) 0 0) 0 0 / calc(var(--a, 0) * 100%) 100% no-repeat, var(--line);
}
.cm-step.is-done .cm-step__dot {
  border-color: var(--accent);
  background: var(--accent);
}
.cm-step.is-now .cm-step__dot {
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.cm-step.is-now a {
  color: var(--ink);
  font-weight: 600;
}
.cm-steps__now {
  display: none;
  margin: 0;
  padding: 0 var(--cm-gutter) 10px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}
@media (max-width: 760px) {
  .cm-step__label {
    display: none;
  }
  .cm-steps ol {
    padding-bottom: 8px;
  }
  .cm-steps__now {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cm-steps, .cm-step__dot {
    transition: none;
  }
}

/* ==========================================================================
   Pictures and words take turns. A part that has a picture or diagram puts
   its words beside it, then the next part turns the other way round, so
   every step of the story has something to look at next to what it says.
   Cards, playgrounds and strips of pictures keep the full width.
   ========================================================================== */
@media (min-width: 861px) {
  body.cs #main .a-act > .a-part:has(> :is(figure, .v)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    align-items: center;
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: 0;
  }
  body.cs #main .a-act > .a-part:has(> :is(figure, .v)) > h3 {
    grid-column: 1 / -1;
    margin-bottom: 20px;
  }
  body.cs #main .a-act > .a-part:has(> :is(figure, .v)) > :is(p, dl, .small, .a-quote, ul:not(.cards, .dids, .stats, .accs), ol.steps:not(.steps--cols)) {
    grid-column: 1;
    width: 100%;
    max-width: none;
    margin-block: 0 18px;
  }
  body.cs #main .a-act > .a-part:has(> :is(figure, .v)) > :is(figure, .v) {
    grid-column: 2;
    grid-row: 2 / span 4;
    margin: 0;
  }
  body.cs #main .a-act > .a-part:has(> :is(figure, .v)) > :is(.cards, .dids, .stats, .accs, .sb, .row, .figs, .figset, .steps--cols, .contrib, .sandbox-wrap, .roles, .figs-roles, .a-more) {
    grid-column: 1 / -1;
    margin-block: 20px;
  }
  /* turned the other way round */
  body.cs #main .a-act > .a-part:nth-of-type(even):has(> :is(figure, .v)) > :is(p, dl, .small, .a-quote, ul:not(.cards, .dids, .stats, .accs), ol.steps:not(.steps--cols)) {
    grid-column: 2;
  }
  body.cs #main .a-act > .a-part:nth-of-type(even):has(> :is(figure, .v)) > :is(figure, .v) {
    grid-column: 1;
  }
}

/* step bar: the two line pieces and the dot share the first row, the label the second */
.cm-step a::before {
  grid-column: 1;
  grid-row: 1;
}
.cm-step__dot {
  grid-column: 2;
  grid-row: 1;
}
.cm-step a::after {
  grid-column: 3;
  grid-row: 1;
}
.cm-step__label {
  grid-row: 2;
}

/* a quote beside a picture reads as a quote, left aligned and smaller */
@media (min-width: 861px) {
  body.cs #main .a-act > .a-part:has(> :is(figure, .v)) > .a-quote {
    text-align: start;
    padding-left: 18px;
    border-left: 3px solid var(--accent);
  }
  body.cs #main .a-act > .a-part:has(> :is(figure, .v)) > .a-quote p:not(.label) {
    font-size: 1.25rem;
    line-height: 1.45;
  }
}

/* a picture or diagram with no words of its own beside it runs the full width */
@media (min-width: 861px) {
  body.cs #main .a-act > .a-part:has(> :is(figure, .v)):not(:has(> :is(p, .a-quote, dl, ul:not(.cards, .dids, .stats, .accs), ol.steps:not(.steps--cols)))) > :is(figure, .v) {
    grid-column: 1 / -1 !important;
    grid-row: auto;
  }
}