/* ==========================================================================
   UMARNA Research Institute
   ringfig.css - the twelve-field figure, wherever it is mounted

   Shared since 2026-10-21, when the figure moved out of Scroll A so the
   About page could carry the live one in place of a screenshot of it. Only
   the figure's own ink lives here. Where it sits, how big it is and what is
   behind it belong to the page that mounts it.
   ========================================================================== */

/* Stroke widths in viewBox units, not screen units. non-scaling-stroke also
   makes the browser measure stroke-dasharray in screen pixels, which breaks
   the draw-in: the dash is set to the circumference in viewBox units, so
   once the viewBox stops mapping one to one the rings never close. */
/* 0.9 → 1.2 on 2026-10-21. The circles carry the twelve systems' own
   colours, and at 0.9 of a 1000-unit viewBox they were the faintest
   thing in the figure once the axes and the points went up. */
.ringfig .ring { fill: none; stroke-width: 1.2; }
.ringfig .tick { stroke: rgba(244, 241, 234, 0.20); stroke-width: 0.7; }

/* The three axes outside the rings (V3): a hairline that fades as it runs
   out. The golden-angle axis is dashed so it reads apart from the two
   square ones. Both a step heavier and half again as long since 2026-10-21:
   at 1.1 units over 122 of run they read as stubs rather than as axes. */
.ringfig .axis-line { fill: none; stroke-width: 2.2; stroke-linecap: round; }
/* The dashed one keeps the weight it had: Richard asked for the four white
   arms, and a dash this fine thickens into a dotted line rather than a
   heavier one. */
.ringfig .axis-line.is-golden { stroke-width: 1.6; stroke-dasharray: 6 7; }

.ringfig text {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-transform: uppercase;
  fill: var(--bone);
  stroke: #000;
  paint-order: stroke fill;
  stroke-linejoin: round;
}

/* Each title carries an invisible band laid along its own arc. Clicking the
   curved type itself would leave only the thin glyph outlines live. The band
   rides in the ring's group, so it turns with the title it serves. */
.ringfig .hit {
  fill: none; stroke: transparent; pointer-events: none;
  cursor: pointer; outline: none;
}
.ringfig .hit:focus-visible { stroke: rgba(183, 163, 139, 0.22); }