I’m sorry to say this is not a direct answer to any of the particular questions you raise — I’m no CSS guru either — but I thought it might be useful to mention that I keep the CSS for the newsletter email (which isn’t processed by Hugo) separate from that for the blog posts. Before I separated them, Windows Mail was displaying blockquotes and links in shades of yellow on a white background! They were unreadable.
First, I removed the CSS content from “Edit CSS” on the Design page and put it in a new template, /css/noemail.css. Then, I edited the
/layouts/partials/head.html template to remove the stylesheet link to
custom.css and replace it with
Finally, I included in “Edit CSS” only the styles that I wanted to apply to the emails. (Obviously, I checked the box to include those styles in emails.) I’m using a big font size because Windows Mail (among who knows how many other email clients) doesn’t respect
max-width. The result isn’t perfect but it’s better than it was.