/* Orbital title positioning — --a (angle) and --r (radius) per compass point. */
#services .orbit-title[for="r-service-N"]  { --a:  -88deg; --r: 40cqi; }
#services .orbit-title[for="r-service-NW"] { --a: -135deg; --r: 42cqi; }
#services .orbit-title[for="r-service-NE"] { --a:  -42deg; --r: 43cqi; }
#services .orbit-title[for="r-service-W"]  { --a: -168deg; --r: 40cqi; }
#services .orbit-title[for="r-service-E"]  { --a:  -12deg; --r: 39cqi; }
#services .orbit-title[for="r-service-SW"] { --a:  158deg; --r: 40cqi; }
#services .orbit-title[for="r-service-SE"] { --a:   22deg; --r: 40cqi; }
#services .orbit-title[for="r-service-S"]  { --a:   90deg; --r: 36cqi; }

/* Per-page angle divergences  */
[data-page="studios"] #services .orbit-title[for="r-service-S"] { --r: 33cqi; }
[data-page="home"] #services .orbit-title[for="r-service-S"]    { --r: 34cqi; }

/* Orbital title tails — rotation per compass point */
#services .orbit-title[for="r-service-N"]  { --tail-rotate:   90deg; }
#services .orbit-title[for="r-service-NW"] { --tail-rotate:   45deg; }
#services .orbit-title[for="r-service-NE"] { --tail-rotate:  135deg; }
#services .orbit-title[for="r-service-W"]  { --tail-rotate:    0deg; }
#services .orbit-title[for="r-service-E"]  { --tail-rotate:  180deg; }
#services .orbit-title[for="r-service-SW"] { --tail-rotate:  -45deg; }
#services .orbit-title[for="r-service-SE"] { --tail-rotate: -135deg; }
#services .orbit-title[for="r-service-S"]  { --tail-rotate:  -90deg; }

#services .orbit-title::before,
#services .orbit-title::after { transform: rotate(var(--tail-rotate, 0deg)); }

/* Tuned tail magnitudes */
#services .orbit-title {
	--tail-cardinal-before: 0px;
	--tail-cardinal-after: 4px;
	--tail-diagonal-before: 0.9rem;
	--tail-diagonal-after: 1.05rem;
}

/* N */
#services .orbit-title[for="r-service-N"]::before,
#services .orbit-title[for="r-service-N"]::after  { left:   calc(50% - 1rem); }
#services .orbit-title[for="r-service-N"]::before { top:    calc(100% - var(--tail-cardinal-before)); }
#services .orbit-title[for="r-service-N"]::after  { top:    calc(100% - var(--tail-cardinal-after)); }

/* NW */
#services .orbit-title[for="r-service-NW"]::before { left:  calc(100% - var(--tail-diagonal-before)); top: calc(100% - var(--tail-diagonal-before)); }
#services .orbit-title[for="r-service-NW"]::after  { left:  calc(100% - var(--tail-diagonal-after));  top: calc(100% - var(--tail-diagonal-after)); }

/* NE */
#services .orbit-title[for="r-service-NE"]::before { right: calc(100% - var(--tail-diagonal-before)); top: calc(100% - var(--tail-diagonal-before)); }
#services .orbit-title[for="r-service-NE"]::after  { right: calc(100% - var(--tail-diagonal-after));  top: calc(100% - var(--tail-diagonal-after)); }

/* W */
#services .orbit-title[for="r-service-W"]::before,
#services .orbit-title[for="r-service-W"]::after  { bottom: calc(50% - 1rem); }
#services .orbit-title[for="r-service-W"]::before { left:   calc(100% - var(--tail-cardinal-before)); }
#services .orbit-title[for="r-service-W"]::after  { left:   calc(100% - var(--tail-cardinal-after)); }

/* E */
#services .orbit-title[for="r-service-E"]::before,
#services .orbit-title[for="r-service-E"]::after  { bottom: calc(50% - 1rem); }
#services .orbit-title[for="r-service-E"]::before { right:  calc(100% - var(--tail-cardinal-before)); }
#services .orbit-title[for="r-service-E"]::after  { right:  calc(100% - var(--tail-cardinal-after)); }

/* SW */
#services .orbit-title[for="r-service-SW"]::before { left:  calc(100% - var(--tail-diagonal-before)); bottom: calc(100% - var(--tail-diagonal-before)); }
#services .orbit-title[for="r-service-SW"]::after  { left:  calc(100% - var(--tail-diagonal-after));  bottom: calc(100% - var(--tail-diagonal-after)); }

/* SE */
#services .orbit-title[for="r-service-SE"]::before { right: calc(100% - var(--tail-diagonal-before)); bottom: calc(100% - var(--tail-diagonal-before)); }
#services .orbit-title[for="r-service-SE"]::after  { right: calc(100% - var(--tail-diagonal-after));  bottom: calc(100% - var(--tail-diagonal-after)); }

/* S */
#services .orbit-title[for="r-service-S"]::before,
#services .orbit-title[for="r-service-S"]::after  { left:   calc(50% - 1rem); }
#services .orbit-title[for="r-service-S"]::before { bottom: calc(100% - var(--tail-cardinal-before)); }
#services .orbit-title[for="r-service-S"]::after  { bottom: calc(100% - var(--tail-cardinal-after)); }