/* Donut stat (BRAND.md 6.25): ring in --ws-red over --ws-red-soft (stroke 28 at 360px),
   number centered, Bebas statement, one plain sentence, italic source. As on the stat cards.
   The value is set in the markup with pathLength="100" and stroke-dasharray="<value> 100". */
.ws-donut{
  display:grid;
  justify-items:center;
  gap:var(--ws-space-4);
  max-width:720px;
  margin:0 auto;
  text-align:center;
}
.ws-donut__chart{ position:relative; width:min(360px,100%); }
.ws-donut__svg{ width:100%; height:auto; }
.ws-donut__track,
.ws-donut__value{ fill:none; stroke-width:28; }
.ws-donut__track{ stroke:var(--ws-red-soft); }
.ws-donut__value{ stroke:var(--ws-red); }
.ws-donut__number{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:none;
  font-family:var(--ws-font-display);
  font-size:clamp(72px,9vw,116px);
  line-height:1;
}
.ws-donut__caption{ display:grid; gap:var(--ws-space-2); justify-items:center; }
.ws-donut__statement{
  max-width:24ch;
  font-family:var(--ws-font-display);
  font-size:var(--ws-fs-h3);
  line-height:.95;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.ws-donut__text{ font-size:var(--ws-fs-lead); line-height:1.45; max-width:42ch; }
.ws-donut__source{ font-size:var(--ws-fs-small); font-style:italic; color:var(--ws-fg-dim); }