How can the template read the properties?

What you are asking is actually quite a complicated questions because it requires knowledge of how Pug's source code actually works. Luckily it is an open source project so if you have the knowledge you can go to their github repo and see how they do it themselves.

Now to be honest, I only briefly skimmed the code when i was looking over it but what I am guessing is happening is that the object that you provide is being merged with another object. If you actually look through the code and their API the render method actually takes three parameters 1 of which is required:

pug.render(source, ?options, ?callback) (the 2 optional parameters start with a question mark)

The ?options parameter is the important one here. It actually expects specific options in this case it is actually expecting the options object to contain these two specific attributes:

 * Options:
 *
 *   - `cache` enable template caching
 *   - `filename` filename required for `include` / `extends` and caching

The code above was taken directly from the source-code of pug which you can find here.

The API for the render method actually confirms this in it's explanation of the render method here, where it states that options is:

An options object, also used as the locals object

So what does this mean? Basically they are expecting the object to contain 2 specific attributes, anything else it contains will be relegated to a locals object, which is the information that you specifically provide to the template. How? Well to be honest I only briefly skimmed the code, and so only have a minute understanding of it. From what I gather, they merge the expected options attributes and the attributes you provide into a new object:

Example:

// Object you provide:
let ob = {title: "Hiyas", content: "This is some content."}

// when you call the render method
pug.render('h1 #{title} p#{content}', ob);

// what it is doing behind the scenes
let newObj = {
    cache: null,
    filename: null,
    self: {
        title: "Hiyas",
        content: "This is some content."
    }
}

Notice how in the newObj that pug creates cache and filename are both null? This is because we didn't provide them as attributes in our object that we provided. So it assumes they are null when it merges them into the new object. The data we sent is relegated to an attribute called self which I believe occurs in this line of code here

So in our example pug will render:

<h1>Hiyas</h1>
<p>This is content.</p>

I think this is because when the parser sees the references you make in the code, what it is actually doing is passing in that data to the self attribute, and returning the values there:

Example:

<!-- What the data actually looks like -->
<h1>newObj.self[title]</h1>
<p>newObj.self[content]</p>

I know that was confusing, and again, maybe an instructor would know better, or someone who works on Pug itself can better answer you.