:root
{
    --header-font: "Times", "Times New Roman", serif;
    --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

*
{
    box-sizing: border-box;
}

a
{
    color: inherit;
}

html
{
    background-color: #000000;
    color: #ffffff;
    font: normal 12pt var(--body-font);
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body
{
    margin: 0;
}

nav#top
{
    background-color: #00000080;
    color: #ffffff;

    display: flex;
    flex-direction: row;
    align-items: center;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

nav#top h1
{
    margin: 0.5rem;
    padding: 0;
}

nav#top h1 img#logo
{
    display: block;
    height: 2rem;
}

nav#top menu,
nav#top menu ul
{
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav#top menu li
{
    display: inline;
    padding: 0 0 0 1rem;
}

nav#top menu li a,
nav#top menu li a:link
{
    color: inherit;
}

div.hero-container
{
    background-position: center center;
    background-size: cover;
    color: #ffffff;
    text-shadow:
        0.1rem 0.1rem 0.5rem #000000,
        0.1rem 0.1rem 0.5rem #000000;

    /* Top padding sufficient to exceed the top nav bar. */
    padding: 3rem 2rem 0;
}

div.hero-container-location
{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
    gap: 2rem;

    height: 100vh;
}

div.hero-container header h2,
div.hero-container header h3
{
    font-family: var(--header-font);
    font-weight: normal;
    margin: 0;
}

div.hero-container-location header
{
    padding: 2rem 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    text-align: right;
}

div.hero-container-location header h2 { font-size: 2em; letter-spacing: -0.05rem; }
div.hero-container-location header h3 { font-size: 4em; letter-spacing: -0.10rem; }

div.hero-container-location header div#media-controls
{
    margin-top: auto;
    padding-top: 2rem;

    display: flex;
    flex-direction: column;
    align-items: end;

    gap: 2rem;
}

div.hero-container-location header div#media-controls div.control-strip
{
    display: flex;
    flex-direction: row;
}

div.hero-container-location header div#media-controls div.control-strip > *
{
    border: 0;
    background-color: #00000080;
    color: #ffffff;
    font-size: 2rem;
}

div.hero-container-location header div#media-controls div.control-strip > *:first-child
{
    border-bottom-left-radius: 1rem;
    border-top-left-radius: 1rem;
}

div.hero-container-location header div#media-controls div.control-strip > *:last-child
{
    border-bottom-right-radius: 1rem;
    border-top-right-radius: 1rem;
}

div.hero-container-location header div#media-controls div.control-strip select
{
    padding: 0.5rem;
}

div.hero-container-location header div#media-controls div.control-strip button
{
    border-left: 1px solid #00000040;
    padding: 0.5rem 1rem;
}

div.hero-container-location header div#media-controls div.control-strip button:active
{
    background-color: #00000060;
}

div.hero-container-location main
{
    background-color: #000000c0;
    border-radius: 1rem;
}

div.hero-container-location main article
{
    display: none;
    overflow-y: scroll;
    max-height: 75vh;
}

div.hero-container-trail
{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
    gap: 2rem;

    height: 22.5rem;
}

div.hero-container-trail header
{
    text-align: center;
}

div.hero-container-trail header h2 { font-size: 4em; letter-spacing: -0.10rem; }

figure
{
    text-align: center;
    margin: 0 0 1rem;
    padding: 0;
}

figure figcaption
{
    font-style: italic;
}

figure figcaption cite,
figure figcaption em,
figure figcaption i
{
    font-style: normal;
}

figure img
{
    max-width: 100%;
}

main
{
    padding: 1rem 0;
}

main article
{
    padding: 1rem 2rem;
}

main article > *:last-child
{
    margin-bottom: 0;
}

body.trail main
{
    margin: auto;
    max-width: 40rem;
}

nav#trail,
footer
{
    font-style: italic;
    text-align: center;
}

nav#trail p.trail-current,
footer p,
footer ul#sponsors
{
    margin: 0.5rem 1rem 1rem;
    padding-top: 0.5rem;
}

/* See sponsors.css for animation. */

nav#trail menu
{
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

nav#trail menu li
{
    background-position: center center;
    background-size: cover;
}

nav#trail menu li:first-child { text-align: right; }
nav#trail menu li             { text-align: center; }
nav#trail menu li:last-child  { text-align: left; }

nav#trail menu li a
{
    background-color: #00000040;
    color: inherit;
    display: block;
    font-size: 2rem;
    font-weight: bold;
    padding: 3rem;
}


nav#trail menu li a:hover
{
    background-color: #00000000;
}

nav#trail menu li.trail-previous a::before,
nav#trail menu li.trail-next a::before
{
    display: block;
    font-size: 1rem;
    font-weight: normal;
    text-decoration: none;
}

nav#trail menu li.trail-previous a::before { content: "Previous:"; }
nav#trail menu li.trail-next a::before     { content: "Next:"; }

p
{
    margin: 0 0 1rem;
}

p.attribution
{
    font-style: italic;
}

ul.gallery
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

ul.gallery li figure
{
    margin-bottom: 0;
}

@media screen and (max-width: 1600px) { ul.gallery { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 960px) { ul.gallery { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 640px) { ul.gallery { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 400px) { ul.gallery { grid-template-columns: 1fr; } }

@media screen and (max-width: 960px) {
    nav#top
    {
        font-size: 0.75rem;
    }

    nav#top h1
    {
        margin: 0.25rem;
    }

    nav#top h1 img#logo
    {
        display: block;
        height: 1.5rem;
    }

    div.hero-container
    {
        /* Top padding still sufficient to exceed the top nav bar, which is
        shorter now. */
        padding: 2rem 0 0;
    }

    div.hero-container-location
    {
        background-position: center 0;
        background-size: auto 75vh;
        background-repeat: no-repeat;
        display: block;
        height: auto;
    }

    div.hero-container-location header
    {
        align-items: center;
        justify-content: center;
        text-align: center;
        /* Height is no longer enforced by the parent element, so this needs to
        pick up the slack. We want the bottom of the element to line up with
        the bottom of the parent element's background image, so we need to
        subtract the height of the nav bar. */
        height: calc(75vh - 2rem);
    }

    div.hero-container-location header div#media-controls
    {
        flex-direction: row;
    }

    div.hero-container-location main
    {
        border-radius: 0;
        padding: 0;
    }

    div.hero-container-location main article
    {
        background-color: #000000;
        padding: 1rem 1rem;
        max-height: 50vh;
    }

    nav#trail p.trail-current
    {
        border-top: 1px solid #ffffff;
    }

    nav#trail menu li a
    {
        font-size: 1rem;
        padding: 2rem;
    }

    nav#trail menu li.trail-previous a::before,
    nav#trail menu li.trail-next a::before
    {
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 960px) and (min-aspect-ratio: 1) {
    div.hero-container-location
    {
        background-position: 0 0;
        background-size: 100vw auto;
    }
}