/* CapitalQ orb — the CapitalQ character (see js/cq-orb.js). The element is square and fills its parent's width. */
.cq-orb{ position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; }
/* a soft gold core under the ring so the character reads as a glowing ball, not only a halo */
.cq-orb::before{
  content: ''; position: absolute; inset: 17%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(247,220,150,.30), rgba(226,178,76,.14) 45%, rgba(226,178,76,0) 100%);
}
.cq-orb canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* no WebGL: a still gold ring in CSS (a radial gradient is not a border-radius, so the square-corner rule is untouched) */
.cq-orb--static{
  background:
    radial-gradient(circle at 50% 50%, rgba(60,37,9,.0) 0 50%, rgba(226,178,76,.85) 57%, rgba(247,220,150,.55) 62%, rgba(226,178,76,0) 70%),
    radial-gradient(circle at 50% 50%, rgba(226,178,76,.18), rgba(226,178,76,0) 58%);
}


/* ── batch 7 (G1) · the white Q at the centre of the orb ──────────────────
   The character now reads as CapitalQ wherever the orb appears. Sized in
   container units so it scales with the orb at every size on the site
   (rem value first as the fallback for engines without container units). */
.cq-orb{ container-type: size; }
.cq-orb__q{
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  pointer-events: none; user-select: none;
  font-family: var(--font-display, Inter, sans-serif);
  font-weight: 600; letter-spacing: -.02em; line-height: 1;
  color: #FFFFFF; -webkit-text-fill-color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(10,10,11,.45);
  font-size: 1.6rem;
  font-size: 40cqw;
}