/* Topic cluster on three foundations (includes/visuals/cluster.php) */
.cs { min-width: 0; }
.cs-stage { position: relative; container-type: inline-size; }
.cs-svg { overflow: visible; }
.cs-pillar { fill: var(--forest); }
.cs-ring { fill: none; stroke: var(--green-2); stroke-width: 2; opacity: .55; }
.cs-dot { fill: var(--green); stroke: var(--forest); stroke-width: 3; }
.cs-dot--5, .cs-dot--6 { fill: var(--white); }
.cs-link { fill: none; stroke: var(--forest); stroke-width: 2.2; stroke-linecap: round; }
.cs-head { fill: var(--forest); }
.cs-head--x { fill: #7d8a80; }
.cs-cross { fill: none; stroke: #7d8a80; stroke-width: 1.8; stroke-dasharray: 5 6; }

/* page labels, placed over the drawing (viewBox 640 x 440) */
.cs-n { position: absolute; margin: 0; display: grid; gap: 3px; transform: translateY(-50%); }
.cs-tag { font-size: 12px; font-size: clamp(10.5px, 1.8cqw, 12.5px); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--green-text); }
.cs-t { font-size: 14px; font-size: clamp(13px, 2.35cqw, 16px); line-height: 1.32; font-weight: 600; color: var(--forest); }
.cs-n--1, .cs-n--2, .cs-n--3 { text-align: right; }
.cs-n--1 { right: 71.56%; top: 15.91%; width: 27%; }
.cs-n--2 { right: 73.91%; top: 50%; width: 25%; }
.cs-n--3 { right: 71.56%; top: 84.09%; width: 27%; }
.cs-n--4 { left: 71.56%; top: 15.91%; width: 27%; }
.cs-n--5 { left: 73.91%; top: 50%; width: 25%; }
.cs-n--6 { left: 71.56%; top: 84.09%; width: 27%; }
.cs-n--p { left: 50%; top: 50%; width: 19%; transform: translate(-50%, -50%); text-align: center; justify-items: center; }
.cs-n--p .cs-tag { color: var(--green); font-size: clamp(9.5px, 1.6cqw, 11.5px); }
.cs-n--p .cs-t { color: var(--white); font-family: var(--font-serif); font-weight: 500; font-size: clamp(13px, 2.4cqw, 17px); line-height: 1.2; }

.cs-legend { justify-content: center; margin-top: 4px; }
.cs-key { position: relative; width: 30px; height: 0; border-top: 2px solid var(--forest); flex: none; }
.cs-key::before, .cs-key::after { content: ""; position: absolute; top: -5px; border: 4px solid transparent; }
.cs-key::after { right: -2px; border-left: 7px solid var(--forest); border-right: 0; }
.cs-key--both::before { left: -2px; border-right: 7px solid var(--forest); border-left: 0; }

/* the foundations */
.cs-base { margin-top: 28px; padding-top: 22px; border-top: 2px solid var(--forest); }
.cs-base .vz-label { margin: 0 0 12px; text-align: center; }
.cs-bases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cs-b { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--forest); border-top: 3px solid var(--green); }
.cs-b strong { font-size: 16.5px; color: var(--white); }
.cs-b span { font-size: 14px; line-height: 1.45; color: var(--sage); }

/* animation: foundations, then the pillar, the links drawing outwards, the pages, the arrowheads */
.js .vz-figure .cs-b { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .cs-b--1 { transition-delay: .1s; } .js .vz-figure .cs-b--2 { transition-delay: .2s; } .js .vz-figure .cs-b--3 { transition-delay: .3s; }
.js .vz-figure .cs-pillar, .js .vz-figure .cs-dot { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1) .4s; }
.js .vz-figure .cs-link { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s ease; }
.js .vz-figure .cs-n, .js .vz-figure .cs-head, .js .vz-figure .cs-crosses { opacity: 0; transition: opacity .5s ease; }
.js .vz-figure .cs-link--1, .js .vz-figure .cs-n--1 { transition-delay: .7s; }
.js .vz-figure .cs-link--4, .js .vz-figure .cs-n--4 { transition-delay: .8s; }
.js .vz-figure .cs-link--2, .js .vz-figure .cs-n--2 { transition-delay: .9s; }
.js .vz-figure .cs-link--5, .js .vz-figure .cs-n--5 { transition-delay: 1s; }
.js .vz-figure .cs-link--3, .js .vz-figure .cs-n--3 { transition-delay: 1.1s; }
.js .vz-figure .cs-link--6, .js .vz-figure .cs-n--6 { transition-delay: 1.2s; }
.js .vz-figure .cs-dot--1 { transition-delay: 1.1s; } .js .vz-figure .cs-dot--4 { transition-delay: 1.2s; }
.js .vz-figure .cs-dot--2 { transition-delay: 1.3s; } .js .vz-figure .cs-dot--5 { transition-delay: 1.4s; }
.js .vz-figure .cs-dot--3 { transition-delay: 1.5s; } .js .vz-figure .cs-dot--6 { transition-delay: 1.6s; }
.js .vz-figure .cs-n--p { transition-delay: .5s; }
.js .vz-figure .cs-head { transition-delay: 1.7s; }
.js .vz-figure .cs-crosses { transition-delay: 2s; }
.js .vz-figure.is-visible .cs-b, .js .vz-figure.is-visible .cs-pillar, .js .vz-figure.is-visible .cs-dot { opacity: 1; transform: none; }
.js .vz-figure.is-visible .cs-link { stroke-dashoffset: 0; }
.js .vz-figure.is-visible .cs-n, .js .vz-figure.is-visible .cs-head, .js .vz-figure.is-visible .cs-crosses { opacity: 1; }
.js .vz-figure.is-visible .cs-n--p { transform: translate(-50%, -50%); }
.js .vz-figure.is-visible .cs-cross { animation: cs-flow 1.2s linear 2.4s infinite; }
.js .vz-figure.is-visible .cs-ring { animation: cs-pulse 3.2s ease-in-out 2s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cs-flow { to { stroke-dashoffset: -11; } }
@keyframes cs-pulse { 0%, 100% { opacity: .55; transform: none; } 50% { opacity: .15; transform: scale(1.06); } }

/* phones: a simple tree, pillar on top and the six pages below it */
@media (max-width: 639px) {
  .cs-svg, .cs-legend { display: none; }
  .cs-stage { display: grid; gap: 10px; }
  .cs-n, .cs-n--p { position: relative; left: auto; right: auto; top: auto; width: auto; transform: none; text-align: left; justify-items: start; }
  .js .vz-figure.is-visible .cs-n--p { transform: none; }
  .cs-n--p { padding: 16px 18px; border-radius: var(--radius-sm); background: var(--forest); }
  .cs-n--p .cs-t { font-size: 19px; }
  .cs-n--p .cs-tag, .cs-tag { font-size: 11.5px; }
  .cs-t { font-size: 15.5px; }
  .cs-n:not(.cs-n--p) { margin-left: 26px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--white); }
  .cs-n:not(.cs-n--p)::before { content: ""; position: absolute; left: -22px; top: -12px; bottom: -12px; border-left: 2px solid var(--forest); }
  .cs-n.cs-n--6::before { bottom: 50%; }
  .cs-n:not(.cs-n--p)::after { content: ""; position: absolute; left: -22px; top: 50%; width: 20px; border-top: 2px solid var(--forest); }
  .cs-bases { grid-template-columns: minmax(0, 1fr); }
}