Trying to wrap my head around the "compounding effect". Can someone try and explain it using a different approach?

Hey Ryan, the compounding effect is based purely upon the fact that any value specified in ems for a given property is going to be rendered by the browser based on its parent element's value for the same property. Check out this generic example:

<div>
  <p>This text may be bigger than you expect!</p>
</div>

div {
  font-size: 1.5em;
}

p {
  font-size: 1.25em;
}

Normally, you'd expect a font-size of 1.25em to render at 20px (1.25 x default font size of 16px = 20px). However, in this case it compounds on its parent's font-size of 1.5em, leaving it to render at 16px x 1.25 x 1.5 = 30px. But it doesn't necessarily stop there. If, for instance, the div element were inside a body element whose font-size was also specified in ems, that value would become a part of the equation too. This is the compounding effect. You could maybe think of it like a snowball effect. The font-sizes snowball on top of each other and create an end-result that might be much different than you want.