I have this kink of code, where HTML is generated by
[hieroglyph](https://github.com/nyergler/hieroglyph), and CSS is provided by
me: 

```
<html>
<head>
<style>

body {
    counter-reset: chapter 3 section 0;
}

h2 {
    counter-reset: slide 0;
    counter-increment: section;
}
h3 {
    counter-increment: slide;
}

h1:before {
    content: counter(chapter) ". ";
}
h2:before {
    content: counter(chapter) "." counter(section) " ";
}
h3:before {
    content: counter(chapter) "." counter(section) "." counter(slide) " ";
}

</style>
</head>

<body>

<article> <h1>chapter</h1> </article>

<article> <h2>section A</h2> </article>
<article> <h3> slide a</h3> </article>
<article> <h3> slide b</h3> </article>

<article> <h2>section B</h2> </article>
<article> <h3> slide a</h3> </article>
<article> <h3> slide b</h3> </article>

</body>
</html>

```

I would like to number h1/h2/h3 (which I name chapter, section, slide), but
`article` tag make it difficult.

How can I fix the CSS rules, in order to see:

```
3. chapter
3.1 section A
3.1.1 side a
3.1.2 side b
3.2 section B
3.2.1 side a
3.2.2 side b

```

Instead of (`h3` are wrongly numbered):

```
3. chapter
3.1 section A
3.1.1 side a
3.1.1 side b
3.2 section B
3.2.1 side a
3.2.1 side b

```