I've not looked much on Outlook via mobile safari. That is quite an edge case. But I know Outlook webmail resizes emails built with tables, even when using fluid or hybrid layouts.

The way around that is to use a ghost table layout. That will scale down as expected. I know this works for desktop browsers so hopefully will be the same in the mobile browser.

@media should work fine in Gmail apps, however there are some limitation.

Here are some docs
https://developers.google.com/gmail/design/css
https://developers.google.com/gmail/design/reference/supported_css

Common issues are;

• Too much CSS gets the style block removed
• Any CSS gmail doesn't like (including valid css) gets the style block removed.
• Sending to a non @gmail.com address. Using the Gmail App but Not a Gmail Account (often referred to as GANGA) doesn't support CSS in the head.

Outlook overrides your colours by either editing the inline style or if it's added with CSS they add an inline style.

So this <p style="color: green">text</p>
Becomes this <p style="color: rgb(103, 202, 82);" data-ogsc="green">text</p>

I've not yet found a way to prevent this from happening but you can override it by adding styles to your head.

Because they are only touching inline styling and not your <style> block you can add something like p{color:green !important} which will override the added inline styles.

It could end up being quite a lot of code doing it that way if you're using a lot of colours so may be best to only use it where the changes are really bad.

The general rule I follow is keep individual images under 500kb and total email size (all images and HTML) under 1mb. You can go higher but I think you need a strong use case and be mindful how the email looks while it's loading, is it still useable?

Remember you can still get a slow connection, even in the center of a major city.

Outlook conditional comments don't apply to mac only Windows so you're already doing it :)

You could try @supports (position:absolute){}

Or something like this (may have more support but I'm not sure), set the elements in the HTML but hide them

<div style="position:absolute:display:none"></div>

Then target that with CSS and it'll only display them if the position hasn't been removed. And add more styles you might want there.
[ style="position:absolute:display:none"]{display:block !important;}

Try applying the class to a <div> rather than a <td>.

Yahoo is probably adding something to the table to mess it up table {width: auto !important;} maybe.

The class is on the <p> tag but you're trying to change the <a> color. You could either move the class on to the <a> or change the selector to target the <a>
.links-read a:hover { color: #4471c3 !important; }