/* Mobile (max-width: 870px) */

div#body { padding: 0 16px; }

header { padding: 1em 0 0; text-align: center; }
header .logo { text-align: center; }
header .logo img { max-height: 120px; max-width: 100%; width: auto; height: auto; border: 0; }
header .topr { margin-bottom: 1em; }
header .topr div { text-align: center; margin-top: .45em; }
header .topr a, header .topr a:visited { text-decoration: none; color: var(--text); }
header .topr a:hover { color: var(--sage-deep); }

/* Hamburger toggle */
div#mobmenu {
    text-align: center;
    background: var(--sage-deep);
    border-radius: 8px;
    margin-bottom: .4em;
}
div#mobmenu a, div#mobmenu a:visited {
    font-size: 1.05em;
    text-decoration: none;
    padding: .65em 0;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
}
div#mobmenu img { display: none; }

nav { overflow: auto; }
nav ul {
    padding: 0;
    margin: .4em 0;
    display: none;
    list-style: none;
}
nav > ul { padding-bottom: .4em; }
nav ul li {
    list-style: none;
    margin: 0;
    font-size: 1em;
    text-align: center;
    border-bottom: 1px solid var(--tint);
}
nav ul li a, nav ul li a:visited {
    text-decoration: none;
    display: inline-block;
    color: var(--text);
    text-transform: uppercase;
    background: none;
    padding: .75em 1em;
    font-size: .95em;
}
nav ul li.active > a { color: var(--sage-deep); font-weight: 600; }
nav ul li a:hover, nav ul li.active a:hover { color: var(--sage-deep); }

nav ul ul {
    display: none;
    margin: 0;
    padding: .2em 0 .4em;
    background: var(--tint);
}
nav ul ul li { font-size: .9em; border: 0; }
nav ul li ul li a { padding: .55em 1em; text-decoration: none; display: inline-block; }
nav ul ul li a, nav ul ul li a:visited { color: var(--text); }
nav ul ul li a:hover { color: var(--sage-deep); }

span.mobsubmenu { display: inline-block; font-size: 1.3em; margin-left: .15em; line-height: .3em; }
span.mobsubmenu a, span.mobsubmenu a:visited {
    text-decoration: none;
    color: var(--sage-deep) !important;
    padding: .5em !important;
    background: none;
}

article { margin: .8em; }
article > section { padding: 1.15em 1.25em; }
.cat-gallery div { width: calc((100% / 2) - 8px); }
footer { text-align: center; }