My thinking is, the parenthetical text should be the base state, with some HTML to flag the bit that’s an asidenote, and then CSS is applied in supporting browsers to lay out the text as an asidenote.

What I was perhaps not sufficiently clear about is that when I say “parenthetical text”, I mean the text with its associated parentheses.

That way, if the CSS doesn’t load for some reason, or in browsers sufficiently old or limited to not understand generated content (both still roam Sir Tim’s Web!), or in search engine crawlers that don’t execute CSS, the parentheses will still be present.

So the markup is:

<span class="asidenote">by which I mean a utility role, not an ARIA role</span><sup></sup>

with css like:

@supports not (anchor-name: --main) {
    #thoughts article .asidenote + sup {
        display: none;
    }
        #thoughts article .asidenote::before{
            content: "("
        }
        #thoughts article .asidenote::after {
            content: ")"
        }
}