NOTE: I will post a solution to your issue in another answer, please read at least the first part of this answer and do the action suggested.
You have found a bug in Snowman's Passage content parser, in relation to how it handles the wrapping of blocks of continuous content within a paragraph element. I strongly suggests you create a new issue on the Snowman project repository so its developer will know about this bug in the case that they don't read this particular question & answer.
Breakdown of Issue:
1. Automatic wrapping of blocks of continuous content within a paragraph element.
The following is a modified version of your example without your embedded paragraph elements and with two lines of text added at the start to demonstrate the automatic wrapping behaviour.
Some text.
Some more text.
[[Primary|Passage One]]
[[Secondary|Passage Two]]
[[Alternative|Passage Three]]
[[Other|Passage Four]]
... and after Snowman's content parser (and the web-browser's render) is finished processing the Passage content it generates HTML elements like the following.
<div id="passage">
<p>Some text.</p>
<p>
Some more text.
<a href="javascript:void(0)" data-passage="Passage One">Primary</a>
<a href="javascript:void(0)" data-passage="Passage Two">Secondary</a>
<a href="javascript:void(0)" data-passage="Passage Three">Alternative</a>
<a href="javascript:void(0)" data-passage="Passage Four">Other</a>
</p>
</div>
You will note that the first line of text has been wrapped within a paragraph element, as has the second line of text and the four anchor elements (which represent the four markup based links). I believe it is this automatic behaviour that is causing your issue.
2. Things aren't always what they seem or what we expect.
If we replace the above Passage content with your example (with the end paragraph tag of your forth link corrected) and excluding the two lines of text.
[[<p class="button">Primary</p>|Passage One]]
[[<p class="button">Secondary</p>|Passage Two]]
[[<p class="button">Alternative</p>|Passage Three]]
[[<p class="button">Other</p>|Passage Four]]
... with the above HTML as a guild and a little HTML knowledge we would (correctly) expect the Snowman content parser to generate HTML like the following.
<div id="passage">
<p>
<a href="javascript:void(0)" data-passage="Passage One">
<p class="button">Primary</p>
</a>
<a href="javascript:void(0)" data-passage="Passage Two">
<p class="button">Secondary</p>
</a>
<a href="javascript:void(0)" data-passage="Passage Three">
<p class="button">Alternative</p>
</a>
<a href="javascript:void(0)" data-passage="Passage Four">
<p class="button">Alternative</p>
</a>
</p>
</div>
...however, this is not the case. What actually gets produced is the following.
<div id="passage">
<p>
<a href="javascript:void(0)" data-passage="Passage One"></a>
</p>
<p class="button">
<a href="javascript:void(0)" data-passage="Passage One">Primary</a>
</p>
<a href="javascript:void(0)" data-passage="Passage Two">
<p class="button">Secondary</p>
</a>
<a href="javascript:void(0)" data-passage="Passage Three">
<p class="button">Alternative</p>
</a>
<a href="javascript:void(0)" data-passage="Passage Four">
<p class="button">Other</p>
</a>
<p></p>
</div>
As you can see the HTML representing link 2-4 is as we would (correctly) expect but the HTML representing link 1 (incorrectly) consists of two paragraph elements and two anchor elements, and it is this unexpected HTML structure that is causing your issue because your CSS is only styling one of the two anchor elements (incorrectly) representing link 1.
And changing the Passage content to use another block based element (like div) instead of the paragraph element strangely produces the same unexpected HTML structure.
[[<div class="button">Primary</div>|Passage One]]
[[<div class="button">Secondary</div>|Passage Two]]
[[<div class="button">Alternative</div>|Passage Three]]
[[<div class="button">Other</div>|Passage Four]]
... produces the following HTML.
<div id="passage">
<p>
<a href="javascript:void(0)" data-passage="Passage One"></a>
</p>
<div class="button">
<a href="javascript:void(0)" data-passage="Passage One">Primary</a>
</div>
<a href="javascript:void(0)" data-passage="Passage Two">
<div class="button">Secondary</div>
</a>
<a href="javascript:void(0)" data-passage="Passage Three">
<div class="button">Alternative</div>
</a>
<a href="javascript:void(0)" data-passage="Passage Four">
<div class="button">Other</div>
</a>
<p></p>
</div>