.case-study { padding-block-start: clamp(2rem, 5vw, 4.25rem); }
.case-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, .4fr); align-items: start; gap: 2rem; }
.case-intro .page-heading { margin-block-end: 0; }
.case-intro h1 { max-width: 16ch; }
.case-intro .page-heading p { margin-block-start: .65rem; font-size: clamp(1rem, 2vw, 1.18rem); }
.case-facts { margin: 0; padding-inline-start: 1.2rem; border-inline-start: 1px solid var(--line); }
.case-facts > div + div { margin-block-start: .65rem; }
.case-facts dt, .case-figure figcaption { color: var(--muted); font-size: .85rem; }
.case-facts dd { margin: 0; font-weight: 650; }
.case-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.case-figure { margin: 1.4rem 0 0; }
.case-intro + .case-figure { margin-block-start: 2rem; }
.case-figure picture { display: block; }
.case-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.case-figure figcaption { margin-block-start: .55rem; }
.case-section { margin-block-start: 2.4rem; padding-block-start: 1.8rem; border-block-start: 1px solid var(--line); }
.case-study h2 { margin-block-end: .5rem; font-size: clamp(1.25rem, 2.5vw, 1.65rem); }
.case-study p { max-width: 62ch; }
.case-study p:last-child { margin-block-end: 0; }
.case-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem clamp(1.7rem, 5vw, 5rem); }
.case-roles { margin: 0; }
.case-roles div { display: grid; grid-template-columns: minmax(0, .35fr) minmax(0, 1fr); gap: .6rem; padding-block: .55rem; border-block-end: 1px solid var(--line); }
.case-roles dt { font-weight: 700; }
.case-roles dd { margin: 0; color: var(--muted); }
.case-evidence { align-self: start; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--green-pale); }
.case-evidence p { margin-block-end: .4rem; }
.case-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: 2.4rem; }

.case-scope { scroll-margin-block-start: 1.25rem; }
.scope-list { margin-block: 1.2rem 0; }
.scope-list > div {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr);
  gap: .45rem 1.4rem;
  padding-block: .85rem;
  border-block-start: 1px solid var(--line);
}
.scope-list > div:last-child { border-block-end: 1px solid var(--line); }
.scope-list dt { font-weight: 700; }
.scope-list dd { margin: 0; color: var(--muted); }
.scope-status {
  display: inline-block;
  margin-inline-end: .4rem;
  padding: .13rem .5rem;
  border-radius: 5px;
  color: var(--muted);
  background: var(--disabled);
  font-size: .76rem;
  font-weight: 700;
}
.scope-status.implemented { color: var(--arrived-ink); background: var(--arrived-bg); }
.scope-status.partial { color: var(--orange-ink); background: var(--orange-pale); }

@media (max-width: 44rem) {
  .case-intro, .case-columns { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .case-facts { padding: .75rem 0 0; border-inline-start: 0; border-block-start: 1px solid var(--line); }
  .scope-list > div { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .case-roles div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

.walk-through { scroll-margin-block-start: 1rem; }
.walk-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; }
.walk-heading span { color: var(--muted); font-size: .85rem; }
.walk-through video { display: block; inline-size: 100%; aspect-ratio: 8 / 5; background: #173935; border-radius: var(--radius); border: 1px solid var(--line); }
.walk-transcript { margin-block-start: .85rem; padding: .6rem .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
.walk-transcript summary { cursor: pointer; min-block-size: 44px; align-content: center; font-weight: 650; }
.walk-transcript ol { margin-block: .25rem .5rem; padding-inline-start: 1.5rem; }