"While it reduces the white space between the brown strip and the top of text, it doesn't reduce it enough, IMO. What can I do?"
You can add a negative top margin to the text that follows. Change this:
<span style="color:#690000;ETC ETC ETC</span>
to this:
<div style="margin-top:-50px;color:#690000;ETC ETC ETC</div>
You can change the margin-top number to adjust the white space.
"I did try substituting the dashes with the code you suggested, but it turns into a box rather than lines above and below."
The post I linked to doesn't give just one code, it's a tutorial on borders; among other things it explains that a border doesn't have to be on all four sides.
"Also, the box encloses my image, which I don't want it to do."
Sorry, I forgot about the image. To arrange the text (and the dashed border) well in relation to the image, you need a table. Now this has to be more complicated than it would be in a different theme, because the CSS of the theme you're using imposes various things you need to override:
<table style="border:none;font-style:italic;">
<tr>
<td style="border:none;vertical-align:middle;padding:16px 24px 0 0;">
IMAGE CODE HERE
</td>
<td style="border:none;vertical-align:middle;padding:0;">
<div style="border-top:2px dashed #ccc;padding:18px 0 9px;">
The word <strong>“syntax”</strong> refers to the patterns formed by words within sentences and phrases.
</div>
<div style="border-bottom:2px dashed #ccc;padding:9px 0 18px;">
Communications consultancy firm <strong>Syntax</strong> imbues words with the beauty and structural precision of patterns found in the natural world.
</div>
</td>
</tr>
</table>