HTML + Vanilla CSS Recipe Page

Your HTML looks very acceptable both in semantics and organization.

Cant really think of anything other than putting all of your sections inside <main></main>

So it would be like:

<header>
    content
</header>

<main>
    <section>
        content
    </section>
</main>

Your CSS is a "bit" harder to read, though there are multiple ways to make it not so.

First of all, consider moving your reset styles to a separate CSS file and then importing it into the main CSS file or linking separately into the HTML.

With at least that you can no longer need to look at this when trying to focus.

html {
    box-sizing: border-box;
    font-size: 16px;
}
  
*, *:before, *:after {
    box-sizing: border-box;
}
  
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
}
  
ol, ul {
    list-style: none;
}
  
img {
    max-width: 100%;
    height: auto;
}

As for the rest of the code, I'm sure this is not the answer you want and it's probably not the best advice, but have you considered using SCSS or SASS instead of plain CSS ?

They are pretty easy to learn and even if you use .scss/.sass files you can still write plain css into them and it works perfectly fine.

Though using the special syntax they provide could probably make your code more readable.

I'll provide an example here to give you an idea.

This

#nutrition-section table {
    width: 100%;
}

#nutrition-section caption {
    margin-bottom: 12px;
}

#nutrition-section table th {
    text-align: start;
}

#nutrition-section table th,
#nutrition-section table td {
    width: 50%;
    padding: 12px;
    padding-left: 32px;
    border-bottom: 1px solid hsl(30, 18%, 87%);
}

#nutrition-section table tr:last-child th,
#nutrition-section table tr:last-child td {
    border-bottom: none;
}

#nutrition-section table caption {
    text-align: start;
}

Could look like this

#nutrition-section {
    table {
        width: 100%;

        caption {
            margin-bottom: 12px;
            text-align: start;
        }

        th {
            text-align: start;
        }

        th,
        td {
            width: 50%;
            padding: 12px;
            padding-left: 32px;
            border-bottom: 1px solid hsl(30, 18%, 87%);
        }

        tr:last-child th,
        tr:last-child td {
            border-bottom: none;
        }
    }
}

Though it does take some getting used to, there are a few benefits to using SCSS as you might see, such as, not repeating yourself 20 times over (#nutrition-section table - biggest offender).

If we were to remove the properties and only leave selectors around.

This

#nutrition-section table { }

#nutrition-section caption { }

#nutrition-section table th { }

#nutrition-section table th,
#nutrition-section table td { }

#nutrition-section table tr:last-child th,
#nutrition-section table tr:last-child td { }

#nutrition-section table caption { }

Basically turns into this.

#nutrition-section {
    table {
        caption { }

        th { }

        th,
        td { }

        tr:last-child th,
        tr:last-child td {}
    }
}

Reply to this comment if you'd like to know more.

Cheers.