html, body {
    --heading-font: "Sofia Sans Extra Condensed";
    --menu-font: "Sofia Sans Condensed";
    --body-font: "Roboto";
    --primary-highlight: #FF2800;
    --primary-link:      #CE1F00;
    --primary-muted:     #872900;
    --muted:             #3A3A36;
    --text-muted:        #FFFFFF;
    --body-bg-faded:     rgba(255,255,255,.25);
    --body-bg:           #FFFFFF;
    --text-bg:           #000000;
    --menu-bg:           rgba(0,0,0,.1);
    --margin-base:       1rem;
    margin: 0;
    padding: 0;
    font-size-adjust: .6;
    line-height: 1.5;
    font-family: "Roboto";
    min-height: 100vh;
    background: url(images/colville-fade-wide.webp) bottom center/contain no-repeat var(--body-bg);
}
body {
    overflow-y: scroll;
}
h1, h2, h3, h3, h4, h5 {
    font-family: var(--heading-font);
    color: var(--primary-muted);
    font-size-adjust: .75;
}
* + h1, * + h2, * + h3 {
    margin-top: 3rem;
}
a {
    color: var(--primary-link);
}
a:visited {
    color: var(--primary-muted);
}
li+li {
    padding-top: .25rem;
}
header > a {
    display: block;
    background: var(--muted);
    padding: var(--margin-base);
    color: var(--text-muted);
}
header > a:visited {color: var(--text-muted);}
header > a span {font-size-adjust: .75;}
header > a h1 {font-size-adjust: 1;}
header > a img {
    width: 10%;
}
header > a div {
    padding-left: calc( var(--margin-base) * 2 );
}
header h1 {
    color: var(--text-muted);
}
header > a > * {
    display: inline-block;
    vertical-align: middle;
}
header a {
    text-decoration: none;
}
header ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--menu-font);
    font-size-adjust: .75;
    background: var(--menu-bg);
}
header li.current-link span {
    background: var(--menu-bg);
}
header li a:hover {
    background: var(--primary-highlight);
}
header ul li {
    display: inline-block;
    margin: 0;
    padding-top: 0;
}
header ul li a, header ul li span {
    display: inline-block;
    padding: var(--margin-base);
    padding-top:    calc( var(--margin-base) * .75 );
    padding-bottom: calc( var(--margin-base) * .75 );
}
header ul a, header ul a:visited {
    color: black;
}
.content {
    color: var(--text-bg);
    text-align: center;
    padding-top: var(--margin-base);
    display: flex;
    flex-wrap: wrap;
    max-width: 80%;
    margin: 0 auto;
}
.content > * {
    vertical-align: top;
    text-align: left;
}
main {
    flex: 1 0 60%;
    padding: var(--margin-base);
    padding-left: 0;
}
.content > aside {
    flex: 1 1 10%;
}
aside {
    border: 1px solid var(--menu-bg);
    padding: var(--margin-base);
    position: relative;
}
aside ul {
    list-style: none;
    padding: 0;
}
aside li+li {
    padding-top: .5rem;
}
aside img.lead {
    margin: calc( -1 * var(--margin-base) );
    width: calc(100% + var(--margin-base) * 2);
    border-bottom: 1px solid var(--menu-bg);
    height: auto;
}
footer {
    border-top: 1px solid var(--menu-bg);
    margin-top: calc(var(--margin-base) * 4);
    flex: 1 0 100%;
    opacity: .6;
}
footer .logo {
    float: right;
}
footer > * {
    margin-top: var(--margin-base);
}
footer .logo {
    width: 2rem;
    opacity: .9;
    margin: calc( var(--margin-base) * .5 ) var(--margin-base);
    height: auto;
}

div.photos {
    position: relative;
}
div.photos img {
    width: 100%;
    height: auto;
}


.rental + .rental {
    margin-top: 1rem;
}
.rentals .rental a:link {
    text-decoration: none;
}
.rentals .rental a {
    background: var(--body-bg-faded);
    border: 1px solid var(--muted);
    display: flex;
    gap: 1rem;
    padding-right: calc(var(--margin-base)/2);
}
.rentals .rental h3 {
    text-decoration: underline;
}
.rentals .rental div.infobox:first-child { /* pad if no photo */
    padding-left: 1em;
}
.rentals .rental p {
    text-decoration: none;
    color: var(--text-bg);
}
.rentals div {
    flex: 1 1 80%;
}
.rentals div.imgbox {
    aspect-ratio: 4/3;
    background-size: cover;
    flex: 1 1 20%;
    border-right: 1px solid var(--muted);
}


.photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: .5rem;
}
.photo-grid * {
    box-sizing: border-box;
    border: 1px solid var(--muted);
}
.photo-grid *:first-child {
    grid-column: 1/4;
    grid-row: 1/4;
}
.photo-grid .img-enlargeable {
    aspect-ratio: 4/3;
}

@media only screen and (max-width: 64em) {
    .content {
        max-width: 95%;
    }
    main {
        flex: 1 1 60%;
    }
    .content > aside {
        flex: 1 1 0;
    }
    footer {
        flex: 1 0 100%;
    }

    header img {
        display: none;
    }
    header > a {
        background: url(/site/templates/styles/images/logo-light.svg) var(--muted) center right no-repeat;
        background-size: contain;
    }
    header > a > * {
        text-shadow: 0 0 5px black;
    }
    header > a > div {
        padding-left: 0;
    }
    header div > span {
        font-size-adjust: .6;
    }
    .rentals div {
        flex: 1 1 60%;
    }
    .rentals div.imgbox {
        flex: 0 0 40%;
    }

    .sidebar {
        display: flex;
        gap: 3rem;
        margin-top: calc(var(--margin-base) * 4);
        background: var(--menu-bg);
    }
    .sidebar .lead {
        flex: 1 1 30%;
        object-fit: cover;
        order: 2;
        border-left: 1px solid var(--menu-bg);
    }
}

@media only screen and (max-width: 40em) {
    html, body {
        background: url(images/colville-faded.webp) bottom center/contain no-repeat var(--body-bg);
    }
    main {
        padding-right: 0;
    }
    .topnav > :first-child {
        display: none;
    }
    .topnav {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }
    .topnav > * {
        flex: 1 1 50%;
        box-sizing: border-box;
    }
    .topnav a, .topnav span {
        padding: 1rem 1rem;
    }
    .rentals div {
        flex: 1 1 50%;
    }
    .rentals div.imgbox {
        flex: 0 0 50%;
    }
    .sidebar .lead {
        display: none;
    }
    .sidebar .contact-container {
        margin: 0 auto;
    }

    body.rental .sidebar {
        flex-direction: column;
    }
    body.rental .sidebar .info-container, .sidebar .contact-container {
        margin: 0 0 0 var(--margin-base);
    }    
}