/* Case study typography uses the corresponding CV text roles. */
.case-section h2 {
  font-size: 16px;
  line-height: 1.5;
}
.case-section h3 {
  font-size: 15px;
  line-height: 1.5;
}
.case-section p {
  font-size: 14px;
  line-height: 1.625;
  color: #525252;
}
.case-deck {
  font-size: 15px;
  line-height: 1.8;
  color: #525252;
}
.metadata dd {
  font-size: 13.5px;
  line-height: 1.5;
  color: #525252;
}
.toc {
  font-size: 14px;
  line-height: 1.5;
}
.toc a {
  display: block;
}
.case-nav,
.page-end a {
  font-size: 12.5px;
}
@media (min-width: 768px) {
  .case-deck {
    font-size: 16px;
  }
}
@media print {
  .case-section h2,
  .case-section h3 {
    font-size: 10px;
  }
  .case-section p,
  .case-deck,
  .metadata dd,
  .toc {
    font-size: 9px;
  }
  .case-title {
    font-size: 22px;
  }
}

/* "Back to CV" sits under the language list without moving the list. */
.header-side {
  position: relative;
  flex: 0 0 auto;
  max-width: 100%;
}
.header-side .case-nav {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 16px 0 0;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .header-side .case-nav {
    position: static;
    margin: 16px 0 0;
  }
}

/* Workflow diagram: inline SVG scales with the column. */
.workflow-figure {
  margin: 22px 0 0;
}
.workflow-figure svg {
  display: block;
  width: 100%;
  height: auto;
}
.workflow-figure:not(:last-child) {
  margin-bottom: 22px;
}
@media print {
  .workflow-figure {
    break-inside: avoid;
  }
}

/* Optional header illustration: centered between the identity text and the
   language list. Hidden unless at least 24px stays free on both sides
   (measured threshold: 829px). */
.header {
  container-type: inline-size;
}
.identity {
  position: relative;
}
.header-illustration {
  display: none;
  position: absolute;
  top: 50%;
  left: calc(50% + 50cqw - 2.049em);
  transform: translate(-50%, -50%);
  width: 160px;
  height: auto;
  max-height: 200px;
  font-size: 13.5px;
}
@media (min-width: 829px) {
  .header-illustration {
    display: block;
  }
}
@media print {
  .header-illustration {
    display: none;
  }
}