/* CLARITY orbital, from BZDV v18. Design untouched; classes prefixed bzv- and palette mapped to site tokens. */

.bzv-root{--ink:var(--ink);--muted:var(--muted);--red:var(--red-ink);--red2:var(--red-ink-700);--brass:var(--gold-text);--paper:var(--paper-card);--line:var(--line)}.bzv-orbital{container-type:inline-size;margin-inline:auto;
  
  --radius:300px;
  position:relative;
  width:min(720px,92%);
  aspect-ratio:1;
}.bzv-arch{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.bzv-orbit-main{fill:none;stroke:#d9ccbd;stroke-width:1.2}.bzv-orbit-ghost{fill:none;stroke:#eee6dc;stroke-width:.75;stroke-dasharray:2 14}.bzv-orbit-accent{fill:none;stroke:var(--red);stroke-width:1.5;stroke-linecap:round;opacity:.34}.bzv-motion-marker{fill:var(--brass)}.bzv-motion-marker-halo{fill:rgba(154,107,37,.09)}.bzv-system-layer{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:0;transition:opacity .32s ease}.bzv-system-layer circle{fill:none;stroke:rgba(159,45,36,.27);stroke-width:1.3}.bzv-system-layer line{stroke:rgba(159,45,36,.38);stroke-width:1.05;stroke-linecap:round}.bzv-orbital.bzv-system-view .bzv-system-layer{opacity:1}.bzv-orbital.bzv-system-view .bzv-orbit-main, .bzv-orbital.bzv-system-view .bzv-orbit-ghost, .bzv-orbital.bzv-system-view .bzv-orbit-accent, .bzv-orbital.bzv-system-view .bzv-motion-marker, .bzv-orbital.bzv-system-view .bzv-motion-marker-halo{opacity:0}.bzv-node{
  position:absolute;
  width:14.44cqi;height:14.44cqi;
  margin:-7.22cqi 0 0 -7.22cqi;
  padding:0;border:0;background:none;
  cursor:pointer;z-index:8;
  will-change:left,top;
}.bzv-face{position:relative;
  position:relative;

  width:100%;height:100%;
  border-radius:50%;
  background:#fff;
  border:1px solid #d7c8b8;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  transition:transform .32s cubic-bezier(.2,.75,.2,1),border-color .25s,background .25s,box-shadow .25s,opacity .25s;
}.bzv-letter{font:800 clamp(18px,5.28cqi,38px)/1 var(--font-heading);letter-spacing:-.02em;color:var(--red)}.bzv-name{font-family:var(--mono);font-size:clamp(11px,1.7cqi,12.5px);margin-top:5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.bzv-node.bzv-active .bzv-face, .bzv-node:hover .bzv-face, .bzv-node:focus-visible .bzv-face{position:relative;
  transform:scale(1.32);
  background:var(--paper);
  border-color:var(--red);
  box-shadow:0 15px 32px rgba(54,42,34,.075);
}.bzv-node.bzv-dim .bzv-face{position:relative;opacity:.66;transform:scale(.94)}.bzv-node:focus-visible{outline:none}.bzv-node:focus-visible .bzv-face{box-shadow:0 0 0 2px var(--red),0 15px 32px rgba(54,42,34,.075)}.bzv-hub:focus-visible{outline:2px solid var(--red);outline-offset:4px}.bzv-active-index{
  position:absolute;
  left:50%;top:9%;
  width:10px;height:10px;margin-left:-5px;
  border-radius:50%;
  background:var(--brass);
  border:3px solid #fff;
  box-shadow:0 0 0 3px rgba(154,107,37,.10);
  opacity:0;transition:opacity .2s;
}.bzv-node.bzv-active .bzv-active-index, .bzv-node:hover .bzv-active-index, .bzv-node:focus-visible .bzv-active-index{opacity:1}.bzv-hub{
  appearance:none;
  position:absolute;
  left:50%;top:50%;
  width:min(23.06cqi,166px);height:min(23.06cqi,166px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--paper);
  border:1px solid #d2c0ad;
  z-index:12;cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 14px 34px rgba(54,42,34,.06);
  transition:transform .34s cubic-bezier(.2,.75,.2,1),border-color .25s,box-shadow .25s;
}.bzv-hub::before{content:"";position:absolute;inset:12px;border:1px solid #e7dacb;border-radius:50%}.bzv-word{position:relative;z-index:2;display:flex;font:800 clamp(13px,3.47cqi,25px)/1 var(--font-heading);letter-spacing:.02em}.bzv-word span{color:var(--ink);transition:color .25s,margin .3s}.bzv-word span.bzv-on{color:var(--red)}.bzv-core-sub{
  position:absolute;top:14.3cqi;left:50%;transform:translateX(-50%);
  white-space:nowrap;font-family:var(--mono);font-size:clamp(11px,1.6cqi,12px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);opacity:0;transition:opacity .25s
}.bzv-hub.bzv-system{
  transform:translate(-50%,-50%) scale(1.08);
  border-color:var(--red);
  box-shadow:0 0 0 7px rgba(191,59,47,.035),0 18px 38px rgba(54,42,34,.07)
}.bzv-hub.bzv-system .bzv-word span{color:var(--red);margin:0 1.5px}.bzv-hub.bzv-system .bzv-core-sub{opacity:1}.bzv-detail{max-width:455px;padding-left:34px;border-left:1px solid var(--line)}.bzv-count{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:700}.bzv-big{margin-top:16px;font:800 clamp(52px,6vw,72px)/.9 var(--font-heading);letter-spacing:-.03em;color:var(--red)}.bzv-detail .bzv-title{font-size:23px;margin:20px 0 0}.bzv-tag{margin-top:5px;color:var(--red2);font-size:13px;font-weight:600}.bzv-effect{margin-top:24px;padding-top:17px;border-top:1px solid var(--line);font-size:12px;line-height:1.6}.bzv-effect b{display:block;margin-bottom:8px;color:var(--brass);font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase}.bzv-hint{margin-top:24px;color:#7a6f68;font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase}.bzv-detail.bzv-system-copy .bzv-big{display:none}.bzv-detail.bzv-system-copy .bzv-title{margin-top:18px;font-size:28px}@media(max-width:1000px){
  
  
  .bzv-orbital{width:min(700px,92%)}.bzv-detail{border-left:0;border-top:1px solid var(--line);padding:22px 0 0;max-width:700px}}
@media(max-width:620px){
  
  
  
  
  
  .bzv-orbital{width:min(560px,94%)}.bzv-name{font-size:max(10px,1.5cqi);display:none}.bzv-detail{padding:18px 4px}.bzv-big{font-size:56px}}

.bzv-root{color:var(--ink);font-family:var(--font-body)}.bzv-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,64px);align-items:center}@media(min-width:1000px){.bzv-layout{grid-template-columns:minmax(0,1.5fr) minmax(320px,.5fr)}}
.bzv-visual{display:block;width:100%;min-width:0}.bzv-solo{grid-template-columns:minmax(0,1fr) !important}.bzv-solo .bzv-visual{min-height:0}.bzv-detail .bzv-title{margin:20px 0 0}

.bzv-prog{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);pointer-events:none;transform:rotate(-90deg)}
.bzv-prog circle{fill:none;stroke:var(--brass);stroke-width:2;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.bzv-orbital.bzv-auto .bzv-node.bzv-active .bzv-prog circle{opacity:.9;animation:bzvProg 7s linear forwards}
@keyframes bzvProg{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.bzv-prog circle{animation:none !important;opacity:0 !important}}
.bzv-cap{margin:18px auto 0;text-align:center;font:var(--t-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-height:16px}
.bzv-cap [data-title]{color:var(--ink);font-weight:500}

/* ---- v18 refinements, 2026-10-15 ----
   Names sit under each circle instead of inside it, so long names such as
   Accountability no longer spill past the edge at any size, and phones can show them too. */
.bzv-face{overflow:visible}
.bzv-name{position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);margin:0;white-space:nowrap;
  padding:2px 6px;background:var(--paper);line-height:1.2;letter-spacing:.1em;pointer-events:none}
.bzv-node.bzv-active .bzv-name{color:var(--ink);font-size:clamp(8.4px,1.29cqi,9.5px)} /* the active circle is scaled 1.32, so this renders at the normal label size */
/* Dimmed nodes stay solid so the orbit line never shows through them; only the letter fades */
.bzv-node.bzv-dim .bzv-face{opacity:1}
.bzv-node.bzv-dim .bzv-letter{opacity:.62}
.bzv-active-index{top:8%}
/* the caption is a paragraph, so the site justify rule left-aligned it */
.bzv-cap, main .bzv-cap{text-align:center;text-align-last:center}
/* CLARITY page: the explorer sat outside the page gutter and touched the screen edge */
.bz-clsec-orb{max-width:1440px;margin-left:auto;margin-right:auto;box-sizing:border-box;
  padding:0 clamp(20px,5vw,72px) clamp(56px,8vh,96px)}
@media(min-width:1000px){.bz-clsec-orb .bzv-orbital{width:min(720px,92%,calc(100vh - 160px))}}
@media(max-width:1180px){.bz-clsec-orb .bzv-name{letter-spacing:.06em}}
@media(max-width:620px){
  .bzv-name{display:block;font-size:11px;letter-spacing:.02em;top:calc(100% + 4px);padding:1px 3px}
  .bzv-node.bzv-active .bzv-name{font-size:8.4px}
  .bzv-orbital{width:min(560px,86%)}
  .bzv-detail{padding:20px 0 0}
}
@media(max-width:359px){.bzv-name{display:none}} /* the smallest phones: letters only; the caption and detail panel name the active principle */
@media(max-width:620px){.bzv-hub{width:min(30cqi,96px);height:min(30cqi,96px)}} /* the hub word needs more room on phones */