/* Small ink drawings on the same tinted paper as the portfolio cards. */
.case-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  color: var(--rose-deep);
  --mark-accent: #c7838a;
  background: #ecd6d4;
  border-radius: 46% 53% 43% 51%;
  transform: rotate(-4deg);
}
.case-mark--gold { color: var(--sleeve-ink); background: #f1e2bc; --mark-accent: #d7b15a; transform: rotate(3deg); }
.case-mark--olive { color: #505c3d; background: #e1e3ce; --mark-accent: #a5b389; transform: rotate(-2deg); }
.case-mark svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.case-mark .mark-paper { fill: #fff6dc; }
.case-mark circle { fill: var(--mark-accent); }
.case-marked .case-index { display: flex; align-items: center; gap: 11px; }
.decision.case-marked { display: grid; grid-template-columns: 42px minmax(0,1fr); column-gap: 14px; row-gap: 3px; border: 0; padding: 4px 0; }
.decision.case-marked > .case-mark { grid-column: 1; grid-row: 1 / span 2; }
.decision.case-marked > .dt, .decision.case-marked > .dd { grid-column: 2; margin-top: 0; }
@media (max-width: 520px) {
  .case-mark { flex-basis: 36px; width: 36px; height: 36px; }
  .case-mark svg { width: 28px; height: 28px; }
  .decision.case-marked { grid-template-columns: 36px minmax(0,1fr); column-gap: 10px; }
}
@media print {
  .case-mark { background: transparent; color: #33291e; }
}