Nested routes improperly look for resources found in layout

I have a layout defined with some static resources. The head looks like so

<head>
    <meta charset="utf-8">
    <title>Freedom Mutts</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/site.css"/>
</head>

and the body like so

{{{body}}}

with the layout defined in views/layouts and registered in my app.js

// view engine setup
app.engine('.hbs', exphbs({defaultLayout: 'main', extname: '.hbs', partialsDir: 'views/partials/'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', '.hbs');

All works great when I go to a base-level route like /about or /pets but when I try to load a dynamic route based on resources like /pets/1 where ` is the id the application tries to load my resources from the direct parent route. Basically, instead of trying to load

<link rel="stylesheet" href="css/site.css"/>

from css/site.css it looks for pets/css/site.css.

I have no idea why it does this. Maybe there is a configuration setting I am missing? I figured the base layout would render resources the same regardless of my child view.

My route registration looks like this

// app.js
var pets = require('./routes/pets');
app.use('/pets', pets);

// routes/pets.js
router.get('/:id', function(req, res, next) {
    res.render('pet', { 
        title: 'Meet Our New Dog!' ,
        image: 'dog.jpg',
        description: 'This is a description!',
        text: 'This is the text!'
    });
});

If I can provide more code or more information, let me know.

ericf / express-handlebars

Nested routes improperly look for resources found in layout #204