@charset "UTF-8";

/* layout: */
    /* general layout: */
header, main, footer, nav, section, article { display: block; } /* Older browsers may not recognize these tags. */
* {
    margin: 0;
    border-radius: 0;
    border: 0 solid transparent;
    padding: 0;
    font-size: 1em;
}

body { line-height: 1.5; }
section, article {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5em;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h2, h3 {
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}
h4, h5, h6 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

p, ol, ul {
    margin-top: 0.5em;
    margin-bottom: 1em;
}

blockquote {
    border-radius: 0.8em;
    border-width: 2px;
    padding: 0.8em 1.2em;
    margin-top: 0.4em;
    margin-bottom: 0.8em;
    font-size: 1.25em;
}
blockquote::before { content: "\201C"; }
blockquote::after { content: "\201D"; }

ol, ul { padding-left: 2.5em; }
li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

nav ol, nav ul {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
}
nav li { display: inline-block; }
@supports (display: flex) {
    nav ol, nav ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    nav li { display: block; }
}

small, sub, sup { font-size: 0.8em; }

@media screen { /* Prevent scrollbar jump: */
    body > header, #nav-leafward, main, body > footer {
        padding-left: calc(1rem + 100vw - 100%);
        padding-right: 1rem;
    }
}

    /* header layout: */
body > header {
    padding-top: 1px;
    border-bottom-width: 2px;
}
h1, #nav-rootward, #nav-leafward > div {
    margin-left: auto;
    margin-right: auto;
    max-width: 47rem;
}
h1 { text-align: center; }

#nav-rootward ol, #nav-leafward ul {
    padding-left: 2.5rem;
    padding-left: calc(min(2.5rem, 5vw - 1.5rem));
    padding-right: 2.5rem;
    padding-right: calc(min(2.5rem, 5vw - 1.5rem));
}
.nav-breadcrumb {
    display: block;
    position: relative;
    padding: 0.25rem 1rem;
    margin-left: calc(5px + 2rem);
}
li:first-child > .nav-breadcrumb {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    margin-left: 0;
}
li:not(:last-child) > .nav-breadcrumb::after {
    content: "";
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    width: 0;
    height: 0;
    border-width: 1rem 0 1rem 2rem;
    border-style: solid;
    border-top-color: transparent !important;
    border-left-color: inherit;
    border-bottom-color: transparent !important;
    border-right-color: transparent !important;
}
li:not(:first-child) > .nav-breadcrumb::before {
    content: "";
    display: block;
    position: absolute;
    left: -2rem;
    top: 0;
    width: 0;
    height: 0;
    border-width: 1rem 0 1rem 2rem;
    border-style: solid;
    border-top-color: inherit;
    border-left-color: transparent !important;
    border-bottom-color: inherit;
    border-right-color: transparent !important;
}
li:last-child > .nav-breadcrumb {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

#nav-leafward { border-bottom-width: 2px; }
.nav-leaf {
    display: block;
    position: relative;
    margin-right: 3px;
    padding: 0.25rem 1rem;
}
li:first-child > .nav-leaf {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}
li:last-child > .nav-leaf {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

    /* main layout: */
.unicol {
    max-width: 47rem;
    margin-left: auto;
    margin-right: auto;
}

.super-link-container {
    margin: 1em auto;
    text-align: center;
}
.super-link {
    display: inline-block;
    overflow: hidden;
    border-radius: 1.5em;
    border-width: 6px;
    padding: 0.5em 0;
    margin: 0 2.5em;
}
.super-link > div { display: table-row; }
.super-link span {
    display: table-cell;
    vertical-align: middle;
}
.super-link img {
    display: block;
    max-height: 4em;
    border-radius: 1em;
    margin-left: 1em;
}
.super-link strong {
    display: table-cell;
    padding-left: 1em;
    padding-right: 1em;
    font-size: 1.75em;
    vertical-align: middle;
}

.responsive-image {
    display: block;
    max-width: 100%;
    max-height: 93vh;
    max-height: min(93vh, 62.67rem, 133.34vw);
    margin-left: auto;
    margin-right: auto;
    break-inside: avoid;
}

.responsive-object {
    position: relative;
    break-inside: avoid;
}
.responsive-object > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    /* section layout: */
section {
    border-radius: 1rem;
    border-width: 2px;
    overflow: hidden;
}
section > h2 {
    margin-top: 0;
    margin-bottom: 0;
}
.section-header, section > article, section > .rich-text, section > nav {
    padding-left: 1rem;
    padding-right: 1rem;
}
.section-header {
    display: block;
    border-bottom-width: 2px;
}
section > article, section > .rich-text {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.nav-pages { text-align: center; }
.nav-pages li {
    height: 2em;
    margin: 0 1.5em;
    line-height: 2em;
}
@supports (display: grid) {
    .nav-pages > ul {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        grid-column-gap: 1em;
    }
    .nav-pages li {
        display: block;
        margin: 0;
        overflow: hidden;
    }
}

    /* footer layout: */
body > footer {
    margin-top: 2px;
    padding-bottom: 1px;
}
body > footer > div:last-child { text-align: center; }
@supports (display: grid) { @media (min-width: 40rem) {
    body > footer {
        display: grid;
        grid-auto-flow: column;
        grid-column-gap: 1em;
    }
    body > footer > div:last-child { text-align: right; }
} }
.admin-link {
    display: inline-block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.admin-link > div { display: table-row; }
.admin-link span {
    display: table-cell;
    vertical-align: middle;
}
.admin-link span:last-child { padding-left: 0.5em; }
.admin-icon {
    font-size: 3em;
    line-height: 1;
}

/* cosmetic: */
    /* general cosmetic: */
a:link { color: hsl(32.5, 100%, 35%); }
a:visited { color: hsl(20, 100%, 35%); }
a:focus { color: hsl(10, 100%, 42.5%); }
a:hover { color: hsl(10, 100%, 50%); }

button { background-color: hsl(200, 40%, 85%); }
button:focus { background-color: hsl(200, 90%, 75%); }
button:hover { background-color: hsl(200, 100%, 65%); }

blockquote {
    border-color: hsl(45, 100%, 75%);
    background-color: hsl(45, 100%, 94%);
    font-style: italic;
}

    /* header cosmetic: */
body > header {
    background-color: hsl(200, 100%, 20%);
    background-image: linear-gradient(to bottom, hsl(200, 100%, 30%), hsl(200, 80%, 15%));
    border-color: hsl(200, 100%, 50%);
    color: white;
}
#nav-leafward {
    background-color: hsl(200, 55%, 85%);
    border-color: hsl(200, 30%, 70%);
}

.nav-breadcrumb, .nav-leaf {
    border-color: rgb(128, 128, 128);
    background-color: rgb(128, 128, 128);
    color: white !important;
}
a.nav-breadcrumb:link, a.nav-leaf:link { background-color: hsl(32.5, 100%, 35%); }
a.nav-breadcrumb:link::before, a.nav-breadcrumb:link::after { border-color: hsl(32.5, 100%, 35%); }
a.nav-breadcrumb:visited, a.nav-leaf:visited { background-color: hsl(20, 100%, 35%); }
a.nav-breadcrumb:visited::before, a.nav-breadcrumb:visited::after {
    /* Inheriting the :visited border-color doesn't work properly in Chrome as of 2020-05-14.
    This is likely related to the special restrictions on the use of :visited that protect user privacy. */
    border-color: hsl(20, 100%, 35%);
}
a.nav-breadcrumb:focus, a.nav-leaf:focus { background-color: hsl(10, 100%, 42.5%); }
a.nav-breadcrumb:focus::before, a.nav-breadcrumb:focus::after { border-color: hsl(10, 100%, 42.5%); }
a.nav-breadcrumb:hover, a.nav-leaf:hover { background-color: hsl(10, 100%, 50%); }
a.nav-breadcrumb:hover::before, a.nav-breadcrumb:hover::after { border-color: hsl(10, 100%, 50%); }

.nav-error {
    font-weight: bold;
    font-style: italic;
}

    /* main cosmetic: */
body {
    background-color: rgb(245, 245, 245);
    color: black;
}

.super-link {
    border-style: outset;
    border-color: rgb(96, 96, 96);
    background-color: rgb(128, 128, 128);
    color: white !important;
}
a.super-link:link {
    border-color: hsl(32.5, 100%, 40%);
    background-color: hsl(32.5, 100%, 35%);
}
a.super-link:visited {
    border-color: hsl(20, 100%, 40%);
    background-color: hsl(20, 100%, 35%);
}
a.super-link:focus {
    border-color: hsl(10, 90%, 55%);
    background-color: hsl(10, 100%, 42.5%);
}
a.super-link:hover {
    border-color: hsl(10, 100%, 70%);
    background-color: hsl(10, 100%, 50%);
}

    /* section cosmetic: */
section {
    background-color: white;
    border-color: hsl(200, 30%, 80%);
}
.section-header {
    background-color: hsl(200, 60%, 40%);
    background-image: linear-gradient(to bottom, hsl(200, 65%, 50%), hsl(200, 40%, 30%));
    border-color: hsl(200, 30%, 80%);
    color: white !important;
}
a.section-header:focus {
    background-color: hsl(10, 100%, 42.5%);
    background-image: linear-gradient(to bottom, hsl(10, 100%, 42.5%), hsl(10, 75%, 22.5%));
}
a.section-header:hover {
    background-color: hsl(10, 100%, 50%);
    background-image: linear-gradient(to bottom, hsl(10, 100%, 50%), hsl(10, 75%, 30%));
}

.nav-pages-link { color: rgb(160, 160, 160); }

    /* footer cosmetic: */
body > footer {
    background-color: hsl(200, 30%, 90%);
    outline: 2px solid hsl(200, 30%, 70%);
    color: hsl(200, 50%, 30%);
}

    /* wagtail admin cosmetic: */
@font-face {
    font-family: wagtail;
    src: url("wagtailadmin/fonts/wagtail.35d1b48f5e01.woff") format("woff");
    font-style: normal;
    font-weight: 400;
}
a.admin-link { text-decoration: none; }
.admin-icon:before {
    font-family: wagtail;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    speak: never;
    content: "";
}
a.admin-link:link span:last-child { text-decoration: underline; }
